react渲染状态子组件变量未更新?

Question

我有一个正在被调用的组件，然后使用更新的信息再次调用，但是vartopics没有被react更新。谁能解释一下为什么第一个例子没有在屏幕上更新，而第二个例子可以?它是否与useState调用有关?

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

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

topics var未在屏幕上更新:

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

topics var IS在屏幕上更新:

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

Answer 1

传递给useState的参数仅在组件第一次呈现时(即挂载时)考虑。挂载后，道具进入topics状态。在进一步渲染时，对道具的更改不会导致状态的更改，因为状态已经初始化为之前的初始值。

当道具改变时，你可以使用useEffect来改变子元素的状态:

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

除非你在某个地方使用setTopics，否则只渲染道具会更有意义，就像你在最后的代码片段中所做的那样。

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