在 NextJS 中使用 async 和 Cookies.get 的 useEffect答案

【问题标题】：useEffect with async and Cookies.get in NextJS在 NextJS 中使用 async 和 Cookies.get 的 useEffect
【发布时间】：2021-03-12 04:52:18
【问题描述】：

我正在尝试获取使用效果的 cookie 数据，然后使用该数据，我的组件看起来像这样..

const Favourites = (props) => {
  const [isClick, setClick] = useState(false);

  const activityId = props.activityId

  useEffect(() => {
    const favourites = Cookies.get('favourites')
    if (favourites[activityId] === true) {
      setClick(true)
    }
  })

  return (
    <>
      <div className="heart">
        <Heart isClick={isClick} onClick={() => setClick(!isClick)} />
      </div>

    </>
  );
}

这是我在 console.log(Cookies.get('favourites')) 时得到的 -

{"5edf47240dcb4713d3942e1b":true,"5edf47240dcb4713d3942e2b":true,"5fa10bd8f70458050ffe68af":true}

变化

const favourites = Cookies.get('favourites')

到

const favourites = {"5edf47240dcb4713d3942e1b":true,"5edf47240dcb4713d3942e2b":true,"5fa10bd8f70458050ffe68af":true}

产生预期的效果。

favourites 是一个使用 js-cookie 存储在 localstorage 中的 activityID 数组。它基本上是用户最喜欢的活动列表，如果他们喜欢该活动并单击心形按钮，则将 activityID 存储为键并将值设置为 true

上述方法不起作用，如果在收藏夹数组中 activityId 为 true，则 setClick 不会设置为 true。如果我 console.log(Cookies.get('favourites')) 并将结果复制到 const 收藏夹中，那么它确实有效

【问题讨论】：

activityId 是什么（可能是一个状态值？当心它是缺少的依赖项）以及您为Cookies 使用哪个库？
你也可以粘贴favourites中的内容
您能否更具体地了解它不起作用究竟是什么意思？
我相信你只需要在上面做一个JSON.decode
JSON.parse 工作@Victor

标签： reactjs async-await next.js use-effect js-cookie

【解决方案1】：

根据您的编辑，看起来console.log 显示的实际上是string。因此，对 Cookies.get 返回的内容执行 JSON.decode 应该可以解决问题：

const favourites = JSON.decode(Cookies.get('favourites'));

【讨论】：