在 NextJS 中使用异步和 Cookies.get 的 useEffect

Question

我正在尝试获取使用效果中的 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}

产生了预期的效果。

favorites 是使用 js-cookie 存储在本地存储中的 activityID 数组。它基本上是用户最喜欢的活动列表，如果他们喜欢 activity 并单击心脏按钮，那么 activityID 将存储为键并将值设置为 true

以上不起作用，如果收藏夹数组中的 activityId 为真，则 setClick 不会设置为真。如果我 console.log(Cookies.get('favourites')) 并将结果复制到 const favorites 然后它确实有效

Answer 1

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

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

在 NextJS 中使用异步和 Cookies.get 的 useEffect

useEffect with async and Cookies.get in NextJS

reactjs

async-await

next.js

use-effect

js-cookie