反应渲染状态子组件变量未更新？答案

【问题标题】：react render state child component vars not updated?反应渲染状态子组件变量未更新？
【发布时间】：2021-05-24 01:25:46
【问题描述】：

我有一个组件正在被调用，然后用更新的信息再次调用，但是 var topics 没有被 react 更新。有人可以解释为什么第一个示例没有在屏幕上更新，但第二个示例可以吗？是否与 useState 调用有关？

App.js 在初始渲染期间调用一次 DisplayQuestions，然后页面接受用户输入并重新渲染。

<DisplayQuestionsByTopic topics={topics} />
.....

主题变量未在屏幕上更新：

export function DisplayQuestionsByTopic(props) {
    console.log(`DisplayQuestionsByTopic`, props.topics)
    const [topics, setTopics] = useState(props.topics)   //<<<<<<<<
    render(<h1>topics.join(',')</h1>)
}

主题变量已在屏幕上更新：

export function DisplayQuestionsByTopic(props) {
    console.log(`DisplayQuestionsByTopic`, props.topics)
    render(<h1>props.topics.join(',')</h1>)          //<<<<<<<<<<<
}

【问题讨论】：

一旦将其分配给useState(props.topics) 中的状态变量，重新渲染将不会更新它。您必须完全卸载它，然后重新安装它以分配新的props.topics。如果它在每次渲染时都覆盖了 state var，那么它将破坏 react state 背后的想法。
@codemonkey 这是有道理的......那么第二个（工作）示例是在 React 中执行此操作的“最佳实践”方式吗？
视情况而定。如果您想接管props.topics 并在子组件的状态中对其进行管理，那么不。如果您的要求允许您从父级管理它并在每次渲染时将其作为静态变量发送到子级，那么是的。要回答“最佳实践”的问题，确实需要看到完整的画面。

标签： reactjs

【解决方案1】：

传递给useState 的参数仅在组件第一次渲染时被考虑 - 即在安装时。在挂载时，道具被置于topics 状态。在进一步的渲染中，对 prop 的更改不会导致 state 的更改，因为 state 之前已经被初始化为其初始值。

虽然您可以使用useEffect 在道具更改时更改孩子的状态：

useEffect(() => {
  setTopics(props.topics);
}, [props.topics]);

除非你在某处使用setTopics，否则只渲染道具会更有意义，就像你在最终的 sn-p 中所做的那样。

如果您确实需要在子级中执行 setTopics，请考虑从父级传递状态设置器 - 这样，所有状态都在父级中处理，而您不需要t 在需要同步的不同组件中有重复的状态持有者。

【讨论】：