Reactjs 将反应状态传递给函数时的旧值

在我的简单应用程序中，我有两个（样式化组件）输入，类型为日期：

<DateInput 
  type="date" 
  name="startDate" 
  value={state.startDate} 
  onChange={(e) => handleInputChange(e)} 
  required 
/>
<DateInput 
  type="date" 
  name="endDate" 
  value={state.endDate} 
  onChange={(e) => handleInputChange(e)} 
  required 
/>

此函数使用日期输入中的新值更新状态，然后我运行我的数据验证函数，在该函数中我传递状态以验证日期（我检查开始日期是否不大于结束日期）。 我的问题是，当我传递此状态时，它具有较旧的值，例如：

Input value: 01.01.2021
State value: 12.31.2019

Input value: 01.02.2021
State value: 01.01.2021

Input value 01.03.2021
State value: 01.02.2021

---

这样，我就不能比较我的约会了。我发现这是某种状态更新的延迟。我是否可以在状态更新后等待我的数据验证函数运行？

状态将异步更新，并且状态在react组件的特定呈现中保持不变。要查看更新的状态，组件需要重新渲染

您可以使用以下选项之一修复问题：

• 使用

  useffect

  钩子，该钩子在状态更新且组件重新呈现时执行。您可以从

  useffect

  钩子调用

  dataValidation

  函数，但需要将其添加到依赖项数组中

  useEffect(() => {
    dataValidation(state);
  }, [state, dataValidation]);
  

  （确保将

  dataValidation

  函数包装在

  useCallback

  钩子中，以避免无限次地运行

  useffect

  钩子）
  或者，您可以将

  dataValidation

  函数的代码移动到

  useffect

  钩子中

  useEffect(() => {
    // write your data validation code here
  }, [state]);
  

• 如果不想使用

  useffect

  hook，可以更改

  handleInputChange

  函数的实现，如下所示：

  const handleInputChange = (e) => {
     // create an object representing the new state
     const newState = { ...state, [e.target.name]: e.target.value };
  
     // pass the "newState" object to both "setState" and
     // "dataValidation" function
     setState(newState);
     dataValidation(newState);
  };
  

const handleInputChange = (e) => {
   // create an object representing the new state
   const newState = { ...state, [e.target.name]: e.target.value };

   // pass the "newState" object to both "setState" and
   // "dataValidation" function
   setState(newState);
   dataValidation(newState);
};