使用基于道具更新的状态来反应 useState

Question

我有一个功能性 React 组件，大致如下所示：

const MyComponent = (prop1) => {
  
  const [myState, setState] = useState(prop1)  

  return <>
    {myState && <div>Some text...</div>}
    <div onClick={() => setState(true)}>Click me</div>
  </>
}

这显然行不通，因为 React 只计算一次初始状态部分，所以 myState 不会在 prop1 更改时更新。

有没有办法不用 useReducer 就可以完成这项工作？这是 useEffect 的一个很好的用例吗？

Answer 1

这是因为状态只初始化一次。这就是为什么从 useState() 返回的第二个值是一个 setter 函数。它旨在成为初始化后更新状态的唯一方法。在这种情况下，您将使用 useEffect() 挂钩在 props 更改时更新状态（尽管通常没有很好的理由使用 prop 初始化状态）。

const MyComponent = (prop1) => {
  
  const [myState, setState] = useState(prop1)

  useEffect(() => {
    setState(prop1)
  }, [prop1])

  return <>
    {myState && <div>Some text...</div>}
    <div onClick={() => setState(true)}>Click me</div>
  </>
}

Answer 2

要在 prop1 更改时更新 myState，请将第二个参数传递给 useEffect，即效果所依赖的值数组。

示例如下：

const MyComponent = ({ prop1 }) => {
  const [myState, setState] = useState(prop1);

  useEffect(() => {
    setState(prop1);
  }, [prop1]);

  return (
    <>
      {myState && <div>Some text...</div>}
      <div onClick={() => setState(true)}>Click me</div>
    </>
  );
};

Answer 3

useState(initialValue) 只会在第一次渲染时使用 initialValue 并且在重新渲染后不会改变。所以你需要这样写你的代码：

const MyComponent = (prop1) => {
  
  const [myState, setState] = useState(prop1)

  useEffect(() => {
    setState(prop1)
  }, [prop1])

  return <>
    {myState && <div>Some text...</div>}
    <div onClick={() => setState(true)}>Click me</div>
  </>
}

使用基于道具更新的状态来反应 useState

React useState with state that updates based on props

javascript

frontend

reactjs

react-hooks

use-state