Javascript 状态更改后功能组件不会重新启动[反应]

我正在尝试建立一个React应用程序，在这里我可以输入我的体重和身高，它将计算我的BMI值并在图表上显示出来。我不想把所有的东西都放在一个组件中，所以我把它分成了几个小组件

以下是应用程序的主要组件：

const App_function = () => {
  const [arrayBMI, setArrayBMI]=useState([]);
  const [dateArray, setDateArray]=useState([]);

  const handlerMain = (heightData, weightData) => {
    const valueOfBMI = weightData / (heightData/100*heightData/100);
    console.log(valueOfBMI);
    const repMainArray = arrayBMI;
    repMainArray.push(valueOfBMI);
    setArrayBMI(repMainArray);

    const repDateArray = dateArray;
    let currentDateData = new Date();
    let day = currentDateData.getDate();
    if(day < 10) {
      day = '0' + day;
    }
    let month = currentDateData.getMonth() + 1;
    if(month < 10) {
      month = '0' + month;
    }
    let year = currentDateData.getFullYear();
    let date = `${day}-${month}-${year}`;
    repDateArray.push(date);
    setDateArray(repDateArray);
  }

  return (
    <div>
      <Data handlerFunction={handlerMain}/>
      <Diagram arrayMain={arrayBMI} arrayOfDate={dateArray}/>
      <div>{arrayBMI[0]} a {arrayBMI[1]}</div>
      <StoragE/>
    </div>
  );
}

function data_function(props) {

  function formCloser(event) {
    event.preventDefault();
    let heightField = event.target.querySelector('#height').value;
    let weightField = event.target.querySelector('#weight').value;
      props.handlerFunction(heightField, weightField);
        event.target.querySelector('#height').value='';
        event.target.querySelector('#weight').value='';
  }


  return (
    <div className="main-div">
      <p className="paragraph-boy">BMI Calculator</p>
      <form onSubmit={formCloser}>
        <div className="inputs">
          <div className="input_fields">
            <label htmlFor="weight">Weight (in kg)</label>
          <input type="text" id="weight" placeholder="50" autoComplete="off"></input>
          </div>
          <div className="input_fields">
            <label htmlFor="height">Height (in cm)</label>
          <input type="text" id="height" placeholder="175" autoComplete="off"></input>
          </div>
        </div>
        <button type="submit" className="btn">Calculate BMI</button>
      </form>
    </div>
  );
}

export default data_function;

const App_函数=（）=>{
const[arrayBMI，setArrayBMI]=useState（[]）；
const[dateArray，setDateArray]=useState（[]）；
常量handlerMain=（高度数据、重量数据）=>{
常量值BMI=权重数据/（高度数据/100*高度数据/100）；
console.log（valueOfBMI）；
常量repMainArray=arrayBMI；
repMainArray.push（valueOfBMI）；
setArrayBMI（repMainArray）；
const repDateArray=dateArray；
让currentDateData=新日期（）；
let day=currentDateData.getDate（）；
如果（第10天）{
天='0'+天；
}
设month=currentDateData.getMonth（）+1；
如果（月<10）{
月份='0'+月份；
}
让year=currentDateData.getFullYear（）；
设日期=`${day}-${month}-${year}`；
repDateArray.push（日期）；
setDateArray（repDateArray）；
}
返回(
{arrayBMI[0]}a{arrayBMI[1]}
);
}

以下是数据组件：

const App_function = () => {
  const [arrayBMI, setArrayBMI]=useState([]);
  const [dateArray, setDateArray]=useState([]);

  const handlerMain = (heightData, weightData) => {
    const valueOfBMI = weightData / (heightData/100*heightData/100);
    console.log(valueOfBMI);
    const repMainArray = arrayBMI;
    repMainArray.push(valueOfBMI);
    setArrayBMI(repMainArray);

    const repDateArray = dateArray;
    let currentDateData = new Date();
    let day = currentDateData.getDate();
    if(day < 10) {
      day = '0' + day;
    }
    let month = currentDateData.getMonth() + 1;
    if(month < 10) {
      month = '0' + month;
    }
    let year = currentDateData.getFullYear();
    let date = `${day}-${month}-${year}`;
    repDateArray.push(date);
    setDateArray(repDateArray);
  }

  return (
    <div>
      <Data handlerFunction={handlerMain}/>
      <Diagram arrayMain={arrayBMI} arrayOfDate={dateArray}/>
      <div>{arrayBMI[0]} a {arrayBMI[1]}</div>
      <StoragE/>
    </div>
  );
}

function data_function(props) {

  function formCloser(event) {
    event.preventDefault();
    let heightField = event.target.querySelector('#height').value;
    let weightField = event.target.querySelector('#weight').value;
      props.handlerFunction(heightField, weightField);
        event.target.querySelector('#height').value='';
        event.target.querySelector('#weight').value='';
  }


  return (
    <div className="main-div">
      <p className="paragraph-boy">BMI Calculator</p>
      <form onSubmit={formCloser}>
        <div className="inputs">
          <div className="input_fields">
            <label htmlFor="weight">Weight (in kg)</label>
          <input type="text" id="weight" placeholder="50" autoComplete="off"></input>
          </div>
          <div className="input_fields">
            <label htmlFor="height">Height (in cm)</label>
          <input type="text" id="height" placeholder="175" autoComplete="off"></input>
          </div>
        </div>
        <button type="submit" className="btn">Calculate BMI</button>
      </form>
    </div>
  );
}

export default data_function;

功能数据\功能（道具）{
函数formCloser（事件）{
event.preventDefault（）；
让heightField=event.target.querySelector（“#height”）.value；
让weightField=event.target.querySelector（'#weight'）.value；
道具.手柄功能（高度场、重量场）；
event.target.querySelector（'#height'）。value=''；
event.target.querySelector（'#weight'）。value=''；
}
返回(
体重指数计算器

重量（千克）
高度（厘米）
计算体重指数
);
}
导出默认数据_函数；

正如您所看到的，应用程序组件是数据组件的父级。每当我填写表单并点击submit时，它就会触发从 将数据组件添加到应用程序组件。发送到App Component的数据用于计算BMI，然后将其值推入

arrayBMI

（这是App Component中的一种状态）。我不明白为什么提交后没有重新呈现应用程序组件

---

过去两天，我可能在试图修复由它引起的问题。今天我发现，当任何状态的值发生变化时，我的主应用程序组件都不会重新呈现，我不知道原因。

将主处理程序函数包装为具有依赖项（用于更改的侦听器）。

将主处理程序函数包装为具有依赖项（用于更改的侦听器）。

替换此代码

const repMainArray = arrayBMI;
    repMainArray.push(valueOfBMI);

借

及

const repDateArray.push（日期）
更换此代码

const repMainArray = arrayBMI;
    repMainArray.push(valueOfBMI);

借

及
const repDateArray.push（日期）
repMainArray.push（valueOfBMI）这是对状态的变异，状态应该保持不变。此外，您应该避免手动DOM操作，如
event.target.querySelector（“#height”）
，您正在与React抗争，这只会让您更加困难。您需要使用setDateArray（[…repDateArray]）要理解为什么不应该改变状态：要检索表单输入的值并重置其值，请查看。
repMainArray.push（valueOfBMI）这是对状态的变异，状态应该保持不变。此外，您应该避免手动DOM操作，如
event.target.querySelector（“#height”）
，您正在与React抗争，这只会让您更加困难。您需要使用setDateArray（[…repDateArray]）要理解为什么不应该改变状态：要检索表单输入的值并重置其值，请参阅。