如何在顶层调用钩子，如果它们依赖于处理的数据

Question

React Hooks 的第一条规则是"只在顶层调用钩子"。

但是，当钩子useState需要在调用钩子之前必须处理的数据时，我们如何处理如下情况呢？

或者"顶级"是指函数return之上的所有内容，因此下面的代码没问题？

import React, { useState } from 'react'
import { useLocation } from 'react-router'
import { parse } from 'query-string'
function MyComponent() {
  const { search } = useLocation()
  const { sorting } = parse(search)
  const [currentFilter, setCurrentFilter] = useState(sorting)
  return (
    // content
  )
}

Answer 1

此规则是指永远不要在循环、条件或嵌套函数中调用钩子。与钩子依赖于声明的顺序来更新值的事实有关。

你的代码没有错，也没有违反第一条规则，因为无论你每次调用什么，MyComponent useLocation总是第一个被调用，currentFilter第二个。

以下内容将违反第一条规则

const Component = () =>{
    const [foo] = useState()
    if(condition) const [bar] = useState(null)
}