更改调用的<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

我在React Native上遇到了同样的错误......

在密切关注错误消息后，我意识到： 我正在从父屏幕所依赖的子屏幕中删除处于 redux 状态的数据。

例如：ProfileScreen=>SettingScreen

在上面的示例中，SettingScreen是ProfileScreen的子屏幕。 因此，当您从SettingScreen中删除ProfileScreen引用的 redux 状态中的数据时，您会收到相同的错误，因为 redux 未定义ProfileScreenuseContext。

我是如何解决的：

从：

const someTask = () => {
....
dispatch(deleteData(dataId))
navigation.navigate('HomeScreen')
}

自：

const someTask = () => {
....
navigation.navigate('HomeScreen')
dispatch(deleteData(dataId)) //deleting the Data should be the last thing to do to safely navigate away..
}

Answer 3

由于您已经列出了钩子的规则，因此您一定错过了">仅在顶层调用钩子"的重要部分

它指出：

不要在循环、条件或嵌套函数中调用 Hook。相反，始终在 React 函数的顶层使用 Hooks

简单地说，要么将钩子移到条件上方，要么将条件提取到父函数/组件。

Answer 4

在我的情况下，我在组件的顶部有一个简单的行，例如：

if (isLoading) return <dev>Loading..</dev>

在声明常量和变量后，我将这一行移动到通常应该返回的末尾后，错误已经消失了。