Изменение порядка крючков, называемых <Component>

Question

Я получаю предупреждение о React has detected a change in the order of Hooks called by Checkout

Я прочитал https://reactjs.org/docs/hooks-rules.html и похоже, что мой код соответствует требованиям

Предупреждение: снимок экрана от debbuger

Фрагмент файла с крючками:

  if (!token) {
    navigate.push(routes.login)
    return <Text>Redirect</Text>
  }

  const maximumDate = moment().add(1, 'year')
  const minimumDate = moment()
  const formattedToday = minimumDate.format('YYYY-MM-DD')

  const [paymentMethod, setPaymentMethod] = useState(paymentOptions[0].key)
  const [totalAmount, setTotalAmount] = useState(totalCartAmount)
  const [deliveryTime, setDeliveryTime] = useState(0)
  const [date, setDate] = useState(minimumDate)
  const [show, setShow] = useState(false)

  const validationSchema = yup.object().shape({
    couponCode: yup.string(),
    comments: yup.string(),
  })

  useEffect(() => {
    if (deliverySlots.length > 0) {
      setDeliveryTime(deliverySlots[0].id)
    }
  }, [deliverySlots])

  useEffect(() => {
    getDeliveryTimeSlots(country.id, formattedToday, error => {
      if (error) {
        console.log(error)
      }
    })
  }, [])

Полный код компонента: https://codesandbox.io/s/modest-lewin-4x9ss

Answer 1

Если у вас есть хуки в вашем компоненте, вы должны убедиться, что все хуки вызываются на каждом рендере и в том же порядке. Этот код следует ставить после всех хуков (из-за return):

if (!token) {
  navigate.push(routes.login)
  return <Text>Redirect</Text>
}

Answer 2

Как вы уже перечислили правила перехвата, вы, должно быть, пропустили важный раздел ` Только перехватчики вызовов на верхнем уровне "

В нем говорится:

Не вызывайте Hooks внутри циклов, условий или вложенных функций. Вместо этого всегда используйте Hooks на верхнем уровне вашей функции React

Проще говоря, перемещайте перехватываете условие выше условия или извлекаете условие в родительскую функцию / компонент.