javascript - 如果 Hook 依赖于已处理的数据，如何在顶层调用 Hook

Question

first rule React Hooks 声明“只在顶层调用钩子(Hook)”。

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

或者“顶层”是否意味着函数的返回之上的所有内容，因此下面的代码没问题？

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

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

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

以下将打破第一条规则

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