useState() 反应状态变量不会重新渲染。有POV吗？

【问题标题】：useState() react state variable doesn't re-renders. Any POV?useState() 反应状态变量不会重新渲染。有POV吗？
【发布时间】：2021-09-16 21:06:34
【问题描述】：

我需要一些关于 React 的意见。我有这个代码块。根据我的理解，在 setStateX(copy) 之后，整个组件会重新渲染。但就我而言，它没有发生。有什么理由吗？

const [stateX, setStateX] = useState([]);

const addAnotherComponent = (e) => {
    let copy = stateX;
    copy.push(
        <AnotherComponent/>
    );
    setStateX(copy);
  };

【问题讨论】：

let copy = stateX; 副本不是stateX 的副本，这就是它不重新渲染的原因。
在状态中存储组件也是一种反模式。
对我应该如何解决这个问题有什么建议吗？

标签： reactjs react-native react-hooks

【解决方案1】：

因为你改变了状态并且组件不会重新渲染你首先应该克隆状态让 copy=[...stateX]

让更新状态= [...复制，你的组件]

setStateX(updatedState)

【讨论】：

我建议解释为什么我们应该克隆。使用 React，我们需要使用从 useState 返回的方法来更新数组。无需复制stateX。他们可以setStateX([...stateX, <AnotherComponent/>])。虽然，就像 Brian 说的，我们通常不会将组件存储在 React 状态。也许最好将 AnotherComponent 中的内容存储在数组中，比如字符串数组。然后使用 Array.prototype.map 在 JSX 中显示数组。
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。