使用基于 props 更新的状态来反应 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 更改时，您将使用钩子来更新状态（尽管通常没有充分的理由使用 props 初始化状态）。

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>
  </>
}