Question

作为我在Javascript和React Native上的琐碎经验，我一直在努力在日期状态更新后立即执行函数调用checkValidDate。

我正在使用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。
另一种用于选择endDate的{{1}}是否需要至少5分钟的时间
按下startDate按钮时，startDate将设置为chosenMode，反之亦然，true按钮将被设置
endDate是当我们按下日历上的handleConfirm按钮时将执行的功能。根据{{1}}中的设计，只有当我们按OK时，所选的日期才会传递到react-native-modal-date-time-picker道具

在OK和onConfirm更新之后，如何执行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个依赖项，即@override Widget build(BuildContext context) { return Scaffold( body: SingleChildScrollView( scrollDirection: Axis.horizontal, child: Column( children: <Widget>[ Row( children: <Widget>[ Container(height: 40, width: 40,child: Text("")), Container(height: 40, width: 40,child: Text("1")), Container(height: 40, width: 40,child: Text("2")), Container(height: 40, width: 40,child: Text("3")), Container(height: 40, width: 40,child: Text("4")), ] ), Row( children: <Widget>[ Container(height: 40, width: 40,child: Text("A")), InkWell(onTap: () {print("00");},child:Container(height: 40, width: 40,child: Text("00"))), InkWell(onTap: () {print("01");},child:Container(height: 40, width: 40,child: Text("01"))), InkWell(onTap: () {print("02");},child:Container(height: 40, width: 40,child: Text("02"))), InkWell(onTap: () {print("03");},child:Container(height: 40, width: 40,child: Text("03"))) ], ), Row( children: <Widget>[ Container(height: 40, width: 40,child: Text("B")), InkWell(onTap: () {print("10");},child:Container(height: 40, width: 40,child: Text("10"))), InkWell(onTap: () {print("11");},child:Container(height: 40, width: 40,child: Text("11"))), InkWell(onTap: () {print("12");},child:Container(height: 40, width: 40,child: Text("12"))), InkWell(onTap: () {print("13");},child:Container(height: 40, width: 40,child: Text("13"))), ], ), Row( children: <Widget>[ Container(height: 40, width: 40,child: Text("C")), InkWell(onTap: () {print("20");},child:Container(height: 40, width: 40,child: Text("20"))), InkWell(onTap: () {print("21");},child:Container(height: 40, width: 40,child: Text("21"))), InkWell(onTap: () {print("22");},child:Container(height: 40, width: 40,child: Text("22"))), InkWell(onTap: () {print("23");},child:Container(height: 40, width: 40,child: Text("23"))), ], ), ], ), ) ); }

chosenEndDate_unix

在React Native中使用Hooks更新状态后如何立即执行功能？

2 个答案: