即使在刷新后如何保持 state

Question

我正在嘗試將當前的 state 從一頁傳遞到另一頁，當我傳輸它時它可以工作。 但是，新的問題是在新頁面上保留當前的 state。 每次我刷新頁面時，state 都會消失，並不斷收到錯誤消息“無法讀取未定義的屬性‘狀態’”。 我嘗試使用 Hooks 中的 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>

然后go到產品說明：

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

非常感謝大家的任何建議或幫助。 謝謝

Answer 1

您需要將 state 保存到localStorage或sessionStorage ，當組件安裝時，將值從存儲傳遞到 state。 了解 localStorage： https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage