传递给子组件的Prop在更新父组件中的Prop时不会改变其子组件中的值

Question

我有两个功能组件叫做crucial和Timer，其中crucial是父组件，Timer是子组件。

Crucials具有需要向下传递给Timer的用户时间数据，以便它从用户提供的时间启动计时器。

父组件如下:

export default function Crucials() {
const [Hdata, setHData] = useState(0);
const [Mdata, setMData] = useState(0);
let data = {
Hour: 0,
Min: 0,
Sec: 0
};
function timerStart(){
if(Hdata === 0 && Mdata === 0){
console.log("Minimum Timer Initiated");
setHData((minH)=> minH = 0);
setMData((minM)=> minM = 15);
}
data.Hour = 0;
data.Min = Mdata;
data.Secy = Hdata; 
}

return (<div>
<div><Timer timerdata={data}/></div>
<Button variant="contained" color="primary" onClick={timerStart}> Start Timer</Button>
<form className={styles.HTM} onSubmit={timerStart}>
<Input type="number" onChange={e => setHData(e.target.value) } id="outlined-basic" placeholder="Hours(H)" ></Input>
<Input type="number" id="outlined-basic"  onChange={e => setMData(e.target.value)} placeholder="Minutes(M)" ></Input>
</form>
</div>
)}

我的孩子是这样的:

export default function Timer(timerdata) {
let Seconds = timerdata.Sec;
let Minutes = timerdata.Min;
let Hours = timerdata.Hour;
....
...
}

我想做的就是让我能够将data对象传递给子对象，并且只有当timerStart通过Start Timer按钮调用时，它才会更新。

然而，发生的事情是，传递给子对象的数据对象只持有初始化值(0,0,0)，调用timerStart函数，改变数据中的值，不反映在子对象中。

另外，由于一些奇怪的原因，仅仅在两个<Input>字段中输入值就会导致子节点更新数据，但它仍然保存初始值，而不是用户输入的值。

我可能做错了什么事，但我想不出来。如有任何帮助，不胜感激。

Answer 1

您需要使data成为一个状态值，目前:

• 你对对象的更新不会在重新渲染之间持续存在。使用setHData/setMData来更新你的状态会导致你的组件函数被再次调用/执行，重新定义局部变量，如data对象为初始值
• 使用data.Hour = 0;等单独更新您的数据不会导致您的组件/子组件使用更新的值重新渲染。因此，你需要使用react的状态设置函数setX来通知react，你的data对象已经改变，你的组件需要使用新的状态值重新渲染。

相反，创建一个新的状态值来保存data对象，并使用setData()来更新它。这将导致你的更新重新渲染组件和它的子组件:

const {useState} = React;
const App = () => {
const [data, setData] = useState({hour:1,min:2});
const clickHandler = () => {
setData({hour: 10, min: 20}); // use input values instead of hard-coding values
};

return <div>
<Child data={data} />
<button onClick={clickHandler}>Update data</button>
</div>
}
const Child = (props) => <div>
<p>H: {props.data.hour}</p>
<p>M: {props.data.min}</p>
</div>;
ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>

注:

你的代码setHData((minH)=> minH = 0);可以写成setHData(0);，和setMData(15)一样。要更新状态值，所需要做的就是将新值传递给状态设置函数。这里不需要传递箭头函数，因为新值(0和15)不依赖于之前的状态值。