Эффект использования с асинхронностью и файлами cookie.получить в NextJS

#reactjs #async-await #next.js #use-effect #js-cookie

#reactjs #асинхронный-ожидание #next.js #использовать-эффект #js-cookie

Вопрос:

Я пытаюсь получить данные cookie в use effect, а затем использовать эти данные, мой компонент выглядит следующим образом..

 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(‘избранное’)) —

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

изменение

 const favourites = Cookies.get('favourites')
 

Для

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

производит желаемый эффект.

избранное — это массив идентификаторов активности, хранящихся в localstorage с использованием js-cookie. по сути, это список любимых действий пользователей, если им нравится действие и они нажимают сердечную кнопку, тогда ActivityId сохраняется как ключ, а значение устанавливается в true

вышеуказанное не работает, setClick не устанавливается в true, если ActivityId имеет значение true в массиве избранного. Если я console.log(Cookies.get(‘избранное’)) и скопирую результат в const избранное, тогда это сработает

Комментарии:

1. Что такое activityId (может быть, значение состояния? остерегайтесь того, что это недостающая зависимость) и для какой библиотеки вы используете Cookies ?

2. Можете ли вы также вставить то, что в favourites

3. Не могли бы вы уточнить, что именно означает «это не работает «?

4. Я считаю, что вам просто нужно сделать JSON.decode над этим

5. JSON.parse сработал @Victor

Ответ №1:

Из вашего редактирования похоже, что то, что console.log отображается, на самом деле является string . Итак, выполнение a JSON.decode для того, что Cookies.get возвращается, должно сделать свое дело:

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