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

【问题标题】：React-toggle, with react-cookie with a compiled gatsby buildReact-toggle，带有带有已编译 gatsby 构建的 react-cookie
【发布时间】：2020-04-19 14:25:33
【问题描述】：

我正在尝试在已编译的 Gatsby 构建中使用 react-toggle 和 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 始终相同，这就是问题所在。（总是错误的）。

【问题讨论】：

标签： reactjs gatsby react-cookie react-toggle

【解决方案1】：

好的，你们这些漂亮的人，我用了我的 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() 的用法，我提醒自己它是在客户端调用的！

【讨论】：