如何在 state 使用 React Native 中的 Hooks 更新后立即执行 function？

Question

作为我在 Javascript 和 React Native 的琐碎经验，我一直在努力解决如何在我的 state 更新日期之后立即调用checkValidDate来执行 function。

我正在使用react-native-modal-date-time-picker来选择日期。

这是我的代码：

  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}
              />
            )}
  )

基本上，我有 2 个按钮。

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

• 另一个用于选择需要检查startDate是否超过至少 5 分钟的endDate

• 当按下startDate按钮时， chosenMode将被设置为true ，反之亦然endDate按钮

• handleConfirm是 function 我们将在我们按下日历上的OK按钮时执行。 按照react-native-modal-date-time-picker picker 的设计，只有当我们按下OK时，选择的日期才会传递给onConfirm

我们如何在chosenEndDate和chosenEndDate_unix更新后立即执行checkValidDate ？

请帮我

Answer 1

您可以使用useEffect 。 当 selectedEndDate 或 selectedEndDate_unix 更改时，将调用 checkValiddate。

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

官方文档有更多关于它是如何工作的信息： https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

Answer 2

非常感谢李宇鹏。 感谢您的建议，我想出了解决方案

顺便说一句，当我们放置 2 个依赖项时，它们会同时发生变化。 checkValidDate() 将被执行两次。 所以我们将只放置 1 个依赖项，即chosenEndDate_unix

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