Блог

Я пытаюсь передать текущее состояние с одной страницы на другую, и оно работает, когда я его переношу. Однако новая проблема заключается в сохранении текущего состояния на новой странице. Каждый раз, когда я обновляю страницу, состояние исчезает, и я продолжаю получать сообщение об ошибке «не удается прочитать свойство «состояние» неопределенного». Я пытался использовать useEffect из хуков, но это все равно не сработало. Вот пошаговый код:

Страница моего продукта:

 <Grid container direction="row" justify="center" alignItems="center">
  {currentSearch.map((productObj) => {
    // console.log(productObj);
    return (
      <ProductResult
        name={productObj.name}
        price={productObj.price}
        style={productObj.style}
        type={productObj.type}
        depth={productObj.depth}
        height={productObj.height}
        width={productObj.width}
      />
    );
  })}
</Grid>
 

Будет передан компоненту ProductResult:

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

Затем перейдите к описанию продукта:

 const [loadInfo, setLoadInfoState] = useState('');
useEffect(() => {
  // loadDescrInfo();
  setLoadInfoState(props.location.infoObj.state);
}, []);
console.log(loadInfo);
 

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

Вам необходимо сохранить свое состояние в localStorage или sessionStorage , а когда компонент монтируется, передать значение из хранилища в ваше состояние. Прочитайте о localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage