React-toggle，带有带有已编译 gatsby 构建的 react-cookie

Question

我正在尝试在已编译的 Gatsby 构建中使用 react-toggle 和 react-cookie。

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

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

这里的挑战在于，因为代码编译为静态输出，它似乎编译了运行服务器 side/before，所以 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 始终相同，这就是问题所在。（始终为假）.

Answer 1

好的，你们这些漂亮的人，我用我的脑袋解决了它。

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() 的用法，我提醒自己它是在客户端调用的！

React-toggle，带有带有已编译 gatsby 构建的 react-cookie

React-toggle, with react-cookie with a compiled gatsby build

reactjs

gatsby

react-cookie

react-toggle