#javascript #reactjs #react-router #state
#javascript #reactjs #реагировать-маршрутизатор #состояние
Вопрос:
Я пытаюсь передать текущее состояние с одной страницы на другую, и оно работает, когда я его переношу. Однако новая проблема заключается в сохранении текущего состояния на новой странице. Каждый раз, когда я обновляю страницу, состояние исчезает, и я продолжаю получать сообщение об ошибке «не удается прочитать свойство «состояние» неопределенного». Я пытался использовать 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);
Действительно ценю любой совет или помощь от вас. Спасибо
Ответ №1:
Вам необходимо сохранить свое состояние в localStorage
или sessionStorage
, а когда компонент монтируется, передать значение из хранилища в ваше состояние. Прочитайте о localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage