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

Я получаю предупреждение о том, что 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

Всего 2 ответа


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

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

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

Здесь утверждается:

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

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


Есть идеи?

10000