时间戳

首页 > 解决方案 > 反应渲染状态子组件变量未更新？

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

问题描述

我有一个正在被调用的组件，然后用更新的信息再次调用，但topics反应没有更新 var。有人可以解释为什么第一个示例没有在屏幕上更新，但第二个示例可以吗？它与 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>)
}

主题 var 已在屏幕上更新：

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

标签： reactjs

解决方案

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

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

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

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

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

推荐阅读