0

我正在尝试在编译的 Gatsby 版本上使用react-togglewith 。react-cookie

对于那些不知道的人，Gatsby 将 ReactJS 编译成一个静态输出（基本上是纯 HTML 并在客户端做出反应。

我基本上想使用 React-toggle 根据 cookie 值在选中/未选中之间切换。

这里的挑战是，因为代码编译为静态输出，它似乎在服务器端/编译之前运行，所以 defaultChecked 需要从它自己的函数中访问。我们不想直接访问 cookie，反正它是未定义的。

const Toggle = ({cookieName}) => {
  const [cookie, setCookie] = useCookies([cookieName]);
  const getCookieValue = () => typeof cookie[cookieName] === "undefined" ? false : cookie[cookieName] === "true" ? true : false;
  const setCookieValue = (e) => setCookie(cookieName, e.target.checked, {path: '/'});

  return (
    <ToggleWrap>
        <ReactToggle
          defaultChecked={getCookieValue()}
          icons={{
            checked: <ToggleText>Option 1</ToggleText>,
            unchecked: <ToggleText>Option 2</ToggleText>
          }}
          onChange={setCookieValue}
        />
    </ToggleWrap>
  )
};

即使 cookie 发生变化，defaultChecked 始终相同，这就是问题所在。（总是错误的）。

4

1 回答 1

0

好吧，你们这些漂亮的人，我用了我的 noggin 并实际解决了它。

const Toggle = ({metricString, imperialString, cookieName}) => {
const [cookieValue, setCookieValue] = useCookies([cookieName]);
const [checked, setChecked] = useState(false);

const setCookie = (e) => {
  setChecked(JSON.parse(e.target.checked));
  setCookieValue(cookieName, e.target.checked, {path: '/'});
};

useEffect(() => {
  const getCookieValue = () => typeof cookieValue[cookieName] === "undefined" ? false : cookieValue[cookieName] === "true" ? true : false;
  setChecked(getCookieValue());
}, [])

return (
  <ToggleWrap>
      <StyledToggle
        checked={checked}
        icons={{
          checked: <ToggleText>{imperialString}</ToggleText>,
          unchecked: <ToggleText>{metricString}</ToggleText>
        }}
        onChange={setCookie}
      />
  </ToggleWrap>
)

};

看看那里的用法useEffect()，我提醒自己它是在客户端调用的！

于 2020-04-19T16:43:16.710 回答