如何将更新数据发送到子组件。 反应

Question

如果我有一个 object 键值，我们假设由于某些输入而发生变化。 如何更新获取这些值并显示它们的子组件。 当我将值作为道具发送给子组件时，它们显然不会更新并保持为 tempData 中设置的初始值。 那么如何提示子道具重新发送或更新呢？

我已经有函数可以获取数据并将其全部放入 tempData object 中的位置。 我是否通过在 Object 中设置数据来解决这个问题？

 const Parent = () => { const tempData = { location: "", weather: "", temperature: "", }; return ( <> <System onChange={(value) => urlHandler(value)} /> <City onChange={(value) => setCity(value)} /> <Data location={tempData.location} weather={tempData.location} temperature={tempData.temperature} /> </> }; const Child = (props) => { return( <> <div>location: {props.location}</div> <div>temperature: {props.temperature}</div> </> ) };

Answer 1

React 无法检测到您已tempData ，因此它不会使用新数据重新渲染元素。

将数据存储在state中。 使用 state API 更新 state 将触发重新渲染。

这在React 教程中有所介绍，但重点关注旧式 class 组件。 现代代码将在 function 组件中使用useState挂钩。 MDN React 教程也涵盖了这一点。