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

Question

我有两个功能组件，分别称为 Crucials 和 Timer，其中 Crucials 是父组件，Timer 是子组件。

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

我的父组件如下:

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>

)}

我的 child 是这样的:

export default function Timer(timerdata) {

  let Seconds = timerdata.Sec;
  let Minutes = timerdata.Min;
  let Hours = timerdata.Hour;
....
...
}

我只想通过data反对 child 并使其仅在 timerStart 时更新通过 Start Timer 按钮调用。

但是，正在发生的事情是传递给 child 的数据对象只保存初始化值 (0,0,0) 并调用 timerStart更改数据中的值的函数不会反射(reflect)在 Child 中。

此外，出于某些奇怪的原因，只需将值输入到两个 <Input> 中fields 导致 child 更新数据，但它仍然保留初始值而不是用户输入的值。

我可能做错了什么，但我无法弄清楚。感谢您的帮助。

Answer 1

你需要让data成为状态值，目前:

• 您对对象的更新不会在重新呈现之间持续存在。使用 setHData/setMData 更新你的状态会导致你的组件函数被再次调用/执行，重新定义局部变量，如 data 对象到初始值
• 单独使用 data.Hour = 0; 等更新您的数据不会导致您的组件/子组件使用更新后的值重新呈现。因此，您需要使用 React 的状态设置函数 setX 来发出信号以响应您的 data 对象已更改并且您的组件需要使用新的重新渲染陈述值(value)观。

相反，创建一个新的状态值来保存您的 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)不依赖于先前的状态值。