Блог

Главная - Вопросы по программированию - Не удается найти бесконечный цикл в useEffect hook

Не удается найти бесконечный цикл в useEffect hook

#javascript #reactjs #ecmascript-6 #next.js #server-side-rendering

#javascript #reactjs #ecmascript-6 #next.js #рендеринг на стороне сервера

Вопрос:

React выдает ошибку Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. , но я нигде не вижу цикла. Может кто-нибудь мне помочь?

Если я делаю console.log((navs.map((x) => (x.name === "main-nav" ? x : null)))) это напрямую, он возвращает undefined (как navs извлекается после начального рендеринга), поэтому я вынужден проверить, определено ли оно с помощью !!navs 

 import { useState, useEffect } from "react";
import { Config } from "../../config";

export default function Navbar() {
  const [navs, setNavs] = useState();
  const [mainNav, setMainNav] = useState({});

  useEffect(async () => {
    const res = await fetch(`${Config.apiUrl}/navs`);
    const data = await res.json();
    setNavs(data);
  }, []);

  !!navs amp;amp; setMainNav(navs.map((x) => (x.name === "main-nav" ? x : null)));

  console.log(mainNav);

  return (
    <nav></nav>
  );
}

Комментарии:

1. Вы вызываете setMainNav() непосредственно в функции безоговорочно (один раз navs верно). настройка mainNav не влияет на то, что navs есть.

2. Я проверяю navs , определено ли оно перед отображением через него и настройкой mainNav . Что вы имеете в виду?

3. .map всегда будет возвращать новый массив, потому что массивы хранятся по ссылке в Javascript. Таким образом, даже если элементы одинаковые, фактические массивы разные. Оберните этот код в useEffect with navs как зависимость

4. Когда вы устанавливаете состояние непосредственно в компоненте функции, оно запускает его повторную визуализацию с новым состоянием. Один раз navs верно, вызов your setMainNav() никогда не сделает его ложным, поэтому он будет повторно отображаться бесконечно.

5. Привет, ребята, поэтому я поместил его в a useEffect , но это приводит к повторному просмотру страницы три раза ( console.log записываются два пустых объекта, а затем массив.) useEffect(() => { !!navs amp;amp; setMainNav(navs.map((x) => (x.name === "main-nav" ? x : null))); }, [navs]);