Далее. JS "Обработано больше хуков, чем при предыдущем рендере" - PullRequest
Новая
       37

Далее. JS "Обработано больше хуков, чем при предыдущем рендере"

3 голосов
/ 06 августа 2020

В настоящее время я использую useSWR для получения данных из моих express и mon go -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, где имя пользователя - одно из полей в коллекции.

Проблема возникает, когда я пытаюсь добавить эту информацию в обработчик состояния, который затем возвращает ошибку, отображающую больше хуков, чем во время предыдущего рендеринга.

Удаление строки: const[displayNumber] = useState(data.currentInfo.randomString) и любой строки, которая использует переменная состояния displayNumber полностью исправляет ошибку. затем отобразить его с помощью h2.

Может ли кто-нибудь просветить меня, что, возможно, не так с этим подходом?

Я искал в Интернете ошибку, в которой говорится, что она может быть вызвана хуками useEffect, но есть нет в моем коде.

1 Ответ

0 голосов
/ 06 августа 2020

Ошибка описывает, что у вас больше хуков, чем в предыдущем рендере. Если вы читаете документацию по реакции, все useState хуки всегда должны вызываться при каждом рендеринге. У вас не может быть условного 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>
...