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

Question

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

我已经有了获取数据并将其全部放入 tempData 对象中相应位置的函数。我通过在对象中设置数据来解决这个问题吗？

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 因此它不会使用新数据重新渲染元素。

改为将数据存储在状态中。使用状态API更新状态会触发重新渲染。

这在 React tutorial but that focuses on old-style class components. Modern code would use the useState hook in a function component instead. This is also covered by the MDN React tutorial 中有介绍。

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

How do I send updating data to a child component. React

javascript

reactjs

react-component