Question

React Hooks useEffect - 在执行下一个函数之前等待正在修改状态的函数

2020-07-06

630

reactjs react-hooks use-effect

如何让一个函数等待另一个正在更新状态的函数？

示例：

提交时，表单调用 trainData 。TrainData 需要先处理。它使用来自 props 的 data 数组，该数组包含数据。

问题：

在 trainData 的 if 检查中， inputMatrix 和 outputMatrix 都为空（我猜是因为他们需要先更新，但 trainData 不会等待这一点）。

如何解决这个问题？我想我需要使用 useEffect ，但我到底在等什么？

  const [inputMatrix, setInputMatrix] = useState([]);
  const [outputMatrix, setOutputMatrix] = useState([]);

  const processData = () => {
    const inputMatrixTemp = [];
    const outputMatrixTemp = [];
    data.forEach((patientRecord) => {
      const record = Object.values(patientRecord);
      inputMatrixTemp.push(record.slice(1, record.length));
      outputMatrixTemp.push([record[0]]);
    });
    setInputMatrix(inputMatrixTemp);
    setOutputMatrix(outputMatrixTemp);
  };

  const trainData = (e) => {
    e.preventDefault();
    processData();
    if (inputMatrix.length > 0 && outputMatrix.length > 0) {
      ...crazy stuff happens here
    }
  };

<form onSubmit={trainData} className="main__form">

Answer 1

useEffect(() => {
  if (inputMatrix.length > 0 && outputMatrix.length > 0) {
      ...your crazy stuff here
  }
}, [inputMatrix, outputMatrix]); // will only run when changing this

Answer 2

您可以使用 useEffect 来执行此操作

useEffect(() => {
   if (inputMatrix.length > 0 && outputMatrix.length > 0) {
      ...crazy stuff happens here
   }
}, [inputMatrix, outputMatrix])

但您必须在表单的 onSubmit 中调用 processData 。

<form onSubmit={processData} className="main__form">