React Native datetimepicker 重新渲染回默認值

Question

我正在嘗試實施此處找到的此解決方案，但遇到以下錯誤。 Error: rendered more hooks than during the previous render

這是我的代碼。 我錯過了什么？ 我是否正確實施了解決方案？

export default function Foo(){
const [showCalendar, setShowCalendar] = useState(false);

   function fooA(newDate){
      onChange(newDate)// function that updates date, works on ios. I do not think its the issue.
    setShowCalendar(false)

   }

   function fooB(){
     {React.useMemo(() => {
        return (
          <RNDateTimePicker 
            onChange={fooA(newDate)} 
            value={date} 
            display='spinner' 
            {...rest} 
          />
        )
      }, [showCalendar])}
   }

   return (
      <TouchableOpacity onPress={() => setShowCalendar(true)}>
        fooB()
      </TouchableOpacity>
   )
}

Answer 1

在 React 中，每次調用組件 function 時都必須調用您使用的任何鈎子，例如useState或useMemo 。 如果有條件地調用了鈎子，或者在任何其他情況下鈎子並不總是被調用，那么您會收到您所看到的錯誤。 要解決此問題，請將您對useMemo的調用移出fooB ：

const fooB = React.useMemo(() => {
        return (
          <RNDateTimePicker 
            onChange={fooA(newDate)} 
            value={date} 
            display='spinner' 
            {...rest} 
          />
        )
      }, [showCalendar]);

   return (
      <TouchableOpacity onPress={() => setShowCalendar(true)}>
        {fooB}
      </TouchableOpacity>

現在useMemo將被一致地調用。