Блог

Я пытаюсь передать свое значение состояния на другую страницу и сохранить его в своем localStorage. Состояние было сохранено, и оно работает при первом запуске моего приложения. Однако мое значение localStorage продолжает указывать undefined каждый раз, когда я обновляю страницу. Насколько я понимаю, значение localStorage всегда будет существовать, пока я не удалю значение в localStorage. Я попытался изменить свой оператор if / else внутри моей функции Hook useEffect. Вот мой код:

Я передаю состояние с этой страницы, используя:

 <Link to={{
                       pathname: "/product/description",
                       infoObj: {
                           text: "This is information passed on",
                           state: {
                               ...props
                           },
                       }
                   }}>
                        Product Description
                   </Link>
 

И я получаю доступ к состоянию с другой страницы и устанавливаю для него значение localStorageusing:

 useEffect(() => {
    const stateInfo = JSON.stringify(props.location.infoObj);
    localStorage.setItem("info", stateInfo);
}, [])
 

Вот как я получаю доступ к своему элементу в моем локальном хранилище:

 useEffect(() => {
    const getInfo = JSON.parse(localStorage.getItem("info"));
    if(!localStorage.getItem("info") || getInfo.length === 0){
        try{
            localStorage.setItem("info", JSON.stringify(props.location.infoObj));
        } catch (err){
            console.log(err);
        }
    }
},[])
 

Действительно ценю помощь от вас

Вы правы, localStorage будет сохраняться во время обновления страницы или закрытия страницы / браузера, но дополнительные данные, которые вы передаете во время перехода на страницу location.infoObj , не будут. Итак, что в итоге происходит, так это то, что ваш код перезаписывает localStorage с props.location.infoObj помощью, который будет неопределенным после обновления.

Чтобы исправить это, вы можете добавить дополнительное условие в свое первое useEffect .

 useEffect(() => {
  const stateInfo = JSON.stringify(props.location.infoObj);
  if(stateInfo) {
    localStorage.setItem("info", stateInfo);
  }
}, [])