Question

我有两个名为 Crucials 和 Timer 的功能组件，其中 Crucials 是父组件，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 对象传递给孩子，并且它仅在通过 Start TimertimerStart 时更新> 按钮。

然而，正在发生的事情是传递给孩子的数据对象只保存初始化值 (0,0,0) 并且调用 timerStart 函数来更改数据中的值，并没有反映在孩子。

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

我可能做错了什么，但我无法弄清楚。任何帮助表示赞赏。

Answer 1

您需要将 data 设为状态值，目前：

您对对象的更新不会在重新渲染之间持续存在。使用 setHData/setMData 更新您的状态会导致您的组件函数再次被调用/执行，将局部变量（例如 data 对象）重新定义为初始值
单独使用 data.Hour = 0; 等更新您的数据不会导致您的组件/子组件使用更新后的值重新呈现。因此，您需要使用 react 的 state 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)一样。要更新状态值，您需要做的就是将新值传递给状态设置器函数。您无需在此处传递箭头函数，因为您的新值（0 和 15）不依赖于先前的状态值。

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

1 个答案: