将 useState 与基于 props 更新的状态反应 [重复]答案

【问题标题】：React useState with state that updates based on props [duplicate]将 useState 与基于 props 更新的状态反应 [重复]
【发布时间】：2021-10-14 05:39:28
【问题描述】：

我有一个功能性的 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 的好用例吗？

【问题讨论】：

为什么还要使用state？ prop1 的更改将导致重新渲染
你确定你需要那个模式吗？ reactjs.org/blog/2018/06/07/…
@chazsolo 实际代码基于 prop 进行计算并将其用作初始状态。我需要状态，因为我需要在点击时明确“设置状态”。
@ludwiguer 谢谢，我不知道那篇文章。
@sergdenisov 可以，谢谢！

标签： javascript reactjs react-hooks frontend use-state

【解决方案1】：

要在 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>
    </>
  );
};

【讨论】：

【解决方案2】：

这是因为状态只初始化一次。这就是为什么从useState() 返回的第二个值是一个setter 函数。它旨在成为初始化后更新状态的唯一方法。在这种情况下，您将使用 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>
  </>
}

【讨论】：

【解决方案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>
  </>
}

【讨论】：