next.js“比上一次呈现时呈现了更多的钩子”

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，其中username是集合中的一个字段。

当我尝试将此信息添加到状态钩子中时，问题就出现了，然后状态钩子返回的错误呈现的钩子比上一次呈现的钩子要多。

删除行: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>

简而言之，im用swr提取数据，将该信息添加到状态变量中，然后用H2显示它。

谁能告诉我这种方法有什么问题吗？

我已经在网上搜索了这个错误，上面说它可能是由useEffect钩子引起的，但在我的代码中没有任何错误。

Answer 1

该错误说明u的钩子比以前的呈现多。如果读取react文档，则所有Ustate钩子都应该在每个呈现时调用。当您的代码具有以下额外的useState声明时，您不能具有条件useState：

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

这意味着，如果不存在错误而存在数据，则只会调用行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>