javascript - Next.JS "Rendered more hooks than during the previous render"

Question

我目前正在实现 useSWR 以便从我的 express 和 mongo-db 后端获取数据。我能够从数据库中成功获取数据没问题。以下是我用来实现此目的的代码:

```//SWR method for hydration
const fetcher = (...args) => fetch(...args).then(res => res.json())
const { data, error } = useSWR('http://localhost:3000/appi/daily', fetcher)
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>```

然后使用以下方法访问: data.currentInfo.username其中用户名是集合中的字段之一。
当我尝试将此信息添加到状态钩子(Hook)中时，问题就出现了，然后返回的错误呈现的钩子(Hook)比上一次渲染时更多。
删除线: const[displayNumber] = useState(data.currentInfo.randomString)并且任何使用状态变量 displayNumber 的行都会完全修复错误。
我在下面包含了相关代码:

    const fetcher = (...args) => fetch(...args).then(res => res.json())
    const { data, error } = useSWR('http://localhost:3000/appi/daily', fetcher)
    if (error) return <div>failed to load</div>
    if (!data) return <div>loading...</div>
    
      
    const[displayNumber] = useState(data.currentInfo.randomString)


    //handler function for changing state variable
    function handleNumChange(event){
        console.log(event.target.value);
        setNumber(event.target.value);
      } 


    
    return(
      <div>
        <div>
            <Navbar className="navbar"/>
            <h2>{data.currentInfo.username}</h2>
            <h2>{displayNumber}</h2>

简而言之，我用 swr 提取数据，将此信息添加到状态变量，然后用 h2 显示它。
谁能告诉我这种方法可能有什么问题？
我在网上搜索了错误，它说它可能是由 useEffect Hook 引起的，但我的代码中没有。

Answer 1

该错误描述了你比以前的渲染有更多的钩子(Hook)。如果你阅读 react 文档，所有 useState每次渲染都应该调用钩子(Hook)。你不能有条件 useState而您的代码有一个额外的 useState如下:

if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div> 

这意味着如果没有 error还有 data只有这行 const[displayNumber] = useState(data.currentInfo.randomString)将被调用。
编辑:
将其移至顶部通常可以解决您的问题。

    const fetcher = (...args) => fetch(...args).then(res => res.json())
    const { data, error } = useSWR('http://localhost:3000/appi/daily', fetcher)
    //const[displayNumber] = useState(data.currentInfo.randomString) //Needs null checks ofcourse
    //With null checks
    const[displayNumber] = useState((data && data.currentInfo && data.currentInfo.randomString) || undefined)
    //OR
    //const[displayNumber] = useState(data?.currentInfo?.randomString)
    if (error) return <div>failed to load</div>
    if (!data) return <div>loading...</div>