为什么我的反应状态会在组件重新渲染时更新？

Question

我有以下代码：

const [number, setNumber] = useState(6)
function handleClick() { 
setNumber(5) 
}
...
<Button onClick={handleClick}/>

当我单击按钮时，组件根据需要显示“5”。但是当我关闭组件并重新打开它时，它默认返回“6”。设置状态是否会在每次重新渲染时自动发生？有没有好的方法来解决这个问题？

Answer 1

问题是使用本地状态与全局状态。

要保持全局状态，请使用以下内容创建一个

helperState.jsx

（或

.tsx

）文件：

// helperState.jsx
export const [number, setNumber] = useState(6)

然后将其导入到您的组件中：

import { setNumber, number } from "./helperState.jsx"

function handleClick() { 
  setNumber(5) 
}

// ...

<Button onClick={handleClick}/>

Answer 2

当您在功能组件中使用 useState 时，默认情况下不会在渲染之间保留状态。每次重新渲染组件时，状态都会重置为其初始值。

单击按钮时看到“5”的原因是handleClick函数使用setNumber(5)更新状态。这会触发重新渲染，并且由于 number 现在设置为 5，因此组件会显示该值。

但是，当您关闭并重新打开组件时，它会再次进行初始渲染，并且 useState 挂钩将 number 设置回其初始值 6。

要解决此问题并使状态在重新渲染时保持不变，您可以使用一种机制将状态存储在组件范围之外。一种常见的方法是使用浏览器的 localStorage 来保存和检索 number 的值。 您可以通过以下方式修改代码来实现此目的：

import React, { useState, useEffect } from 'react';

function MyComponent() {
  // Retrieve the initial value from localStorage, or use 6 as the default value
  const initialValue = parseInt(localStorage.getItem('number')) || 6;
  const [number, setNumber] = useState(initialValue);

  useEffect(() => {
    // Save the current 'number' value to localStorage whenever it changes
    localStorage.setItem('number', number.toString());
  }, [number]);

  function handleClick() {
    setNumber(5);
  }

  return (
    <div>
      <p>{number}</p>
      <Button onClick={handleClick} />
    </div>
  );
}