传递给 child 组件的道具在更新 parent 中的道具时不会更改其在 child 中的值

Question

我有两个功能组件，称为 Crucials 和 Timer，其中 Crucials 是 parent，Timer 是 Child。

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

我的parent组件如下：

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 object 传递给 child 并使其仅在调用 timerStart 时更新通过 Start Timer 按钮。

但是，正在发生的事情是传递给 child 的数据 object 仅保存初始化值 (0,0,0) 并调用 timerStart 函数，这更改数据中的值，不会反映在 Child.

中

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

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

Answer 1

您需要使 data 成为状态值，目前：

您对对象的更新不会在重新呈现之间持续存在。使用 setHData/setMData 更新你的状态会导致你的组件函数再次成为 called/executed，重新定义局部变量如 data 对象为初始值
单独使用 data.Hour = 0; 等更新您的数据不会导致您的 component/children 组件使用更新后的值重新呈现。因此，您需要使用 React 的状态 setter 函数，setX 来发出信号以表明您的 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)一样。要更新状态值，您需要做的就是将新值传递给状态 setter 函数。您不需要在此处传递箭头函数，因为您的新值（0 和 15）不依赖于先前的状态值。

传递给 child 组件的道具在更新 parent 中的道具时不会更改其在 child 中的值

Prop passed to child component does not change its value in child upon updating prop in parent

javascript

reactjs

react-props