Question

我有一个被调用的组件，然后用更新的信息再次调用，但是 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>)          //<<<<<<<<<<<
}

Answer 1

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

虽然你可以使用 useEffect 来在 prop 改变时改变孩子的状态：

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

除非您在某处使用 setTopics，否则仅渲染道具会更有意义，就像您在最终代码段中所做的那样。

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

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

1 个答案: