Javascript 如何在React Native中的钩子更新状态后立即执行函数？

作为我在Javascript和React Native方面的琐碎经验，我一直在努力解决如何在更新日期状态后立即执行函数调用

checkValidDate

我用它来选择日期

这是我的密码：

  const [chosenStartDate, setChosenStartDate] = useState('');
  const [chosenStartDate_unix, setChosenStartDate_unix] = useState(null);
  const [chosenEndDate, setChosenEndDate] = useState('');
  const [chosenEndDate_unix, setChosenEndDate_unix] = useState(null);

  const handleConfirm = (day) => { 

    hideDatePicker(); // Set isDatePickerVisible to false

    if(chosenMode){ // If true, calendar shows up for choosing starting date, false --> for choosing ending date
      setChosenStartDate(moment(day).format('MMMM Do YYYY, h:mm:ss a'));
      setChosenStartDate_unix(parseInt((new Date(moment(day).format()).getTime())/60000));
      // Convert date to epoch time
    }else{
      setChosenEndDate(moment(day).format('MMMM Do YYYY, h:mm:ss a'));
      setChosenEndDate_unix(parseInt((new Date(moment(day).format()).getTime())/60000));
      checkValidDate(chosenStartDate_unix,chosenEndDate_unix)
      // --> I know that the dates only get updated after the handleConfirm has been executed
      // --> So basically, the chosenEndDate_unix passed in checkValidDate at this moment is still
      // null. Therefore, I can't check it correctly
    }

  };

  const checkValidDate = (start, end) => {
    console.log('Checking')
    console.log('chosenEndDate_unix', chosenEndDate_unix);
    console.log('chosenStartDate_unix', chosenStartDate_unix);
    if(start && end){
      ((end - start) >= 5) 
      ? (console.log('VALID'))
      : (alert('Please travel aleast 5 minutes, life is worth explored!'), setChosenEndDate(''))
    }
  }

  //...
  return(
    //...
    {isDatePickerVisible && (
              <DateTimePickerModal
                isVisible={isDatePickerVisible}
                mode={mode}
                onConfirm={(day)  => {
                  handleConfirm(day)
                  // I tried to execute the checkValidDate here, but it also doesn't work 
                }}
                onCancel={hideDatePicker}
              />
            )}
  )

const[chosenStartDate，setChosenStartDate]=useState（“”）；
const[chosenStartDate_unix，setChosenStartDate_unix]=useState（null）；
常量[chosenEndDate，setChosenEndDate]=useState（“”）；
const[chosenEndDate_unix，setChosenEndDate_unix]=useState（null）；
常量handleConfirm=（天）=>{
hideDatePicker（）；//将IsDatePickService设置为false
如果（chosenMode）{//如果为true，则显示日历以选择开始日期，如果为false-->以选择结束日期
SetChosensStartDate（时刻（天）.format（'MMMM-Do-YYYY，h:mm:ss-a'）；
setChosenStartDate_unix（parseInt（（新日期（moment（day）.format（））.getTime（））/60000））；
//将日期转换为纪元时间
}否则{
setChosenEndDate（时刻（天）.format（'MMMM-Do-YYYY，h:mm:ss-a'）；
setChosenEndDate_unix（parseInt（（新日期（moment（day）.format（））.getTime（））/60000））；
checkValidDate（chosenStartDate_unix，chosenEndDate_unix）
//-->我知道日期只有在执行HandleConfig后才会更新
//-->所以基本上，此时传入checkValidDate的chosenEndDate仍然是
//空。因此，我无法正确检查它
}
};
常量checkValidDate=（开始、结束）=>{
console.log（'检查'）
log（'chosenEndDate\u unix'，chosenEndDate\u unix）；
log（'chosenStartDate_unix'，chosenStartDate_unix）；
如果（开始和结束）{
（（结束-开始）>=5）
？（console.log（'VALID'））
：（提醒（‘请至少旅行5分钟，生命值得探索！’），setChosenEndDate（“”）
}
}
//...
返回(
//...
{isDatePickService&&(
{
HandleConfig（日）
//我试图在这里执行checkValidDate，但它也不起作用
}}
onCancel={hideDatePicker}
/>
)}
)

基本上，我有两个按钮

• 一个用于选择不需要检查的

  startDate

• 另一个用于选择需要检查的

  endDate

  是否比

  startDate

  长至少5分钟

• 当按下

  startDate

  按钮时，

  chosenMode

  将被设置为

  true

  ，反之亦然

• handleConfirm

  是我们按下日历上的

  OK

  按钮时将执行的功能。按照

  react native model date time picker

  中的设计，只有当我们按下

  OK

  时，所选日期才会传递给

  onConfirm

  属性

在更新了

chosenEndDate

和

chosenEndDate\u unix

之后，我们如何执行

checkValidDate

---

请帮助我

您可以使用

useffect

。当chosenEndDate或chosenEndDate发生更改时，将调用checkValiddate

useEffect(()=>{
    checkValiddate()
}, [chosenEndDate, chosenEndDate_unix]); 

---

官方文件中有更多关于其工作原理的信息：

非常感谢李宇鹏。多亏了你的建议，我想出了解决办法

顺便说一句，当我们放置两个依赖项时，它们会像这样同时改变。checkValidDate（）将执行两次。因此，我们将只放置1个依赖项，即

chosenEndDate\u unix

  useEffect(() => {
    if(!chosenMode) checkValidDate(chosenStartDate_unix, chosenEndDate_unix)
  }, [chosenEndDate_unix])