React-toggle, с реакции-повара ie с компилированной сборкой gatsby

Question

Я пытаюсь использовать react-toggle с react-cookie в скомпилированной сборке Gatsby.

Для тех, кто не знает, Gatsby компилирует ReactJS в вывод stati c (в основном плоский обычный HTML с реакцией на стороне клиента.

Я в основном хочу использовать React-toggle для переключения между проверенным / непроверенным на основе значения повара ie.

Проблема здесь, в том, что, поскольку код компилируется в вывод * stati c, кажется, что он запускается на стороне сервера / до его компиляции, поэтому к defaultChecked нужно обращаться из его собственной функции. Мы не хотим получать доступ к cook ie напрямую, в любом случае оно будет неопределенным .

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>
  )
};

Несмотря на то, что повар ie меняется, defaultChecked всегда один и тот же, это проблема (всегда ложно) .

Answer 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(), я напомнил себе, что его называют на стороне клиента!