Блог

У ‘myPosts’ есть объект с несколькими записями внутри него.. Я хотел, чтобы профиль пользователя сразу показывал сообщение после его загрузки, поэтому я передал ‘myposts’ в массив зависимостей.

Но проблема в том, что компонент повторяет рендеринг бесконечно. Как я могу сделать так, чтобы он повторно отображался один раз, только при загрузке нового сообщения? Я не могу понять, почему передача ‘myposts’ в массив вызывает бесконечный рендеринг, а не только один раз.

   const [myposts, setPosts] = useState([]);
  useEffect(() => {
  fetch('/mypost', {
    headers: {
     cookie: 'access_key',
    },
   })
     .then((res) => res.json())
     .then((data) => {
     // console.log(data);
     setPosts(data.myposts);
  });
 }, [myposts]);
 

При разрешении выборки он изменяет myposts, что запускает выборку, поскольку он указан как зависимость от useEffect, которая изменяет myposts, и так продолжается…

Кажется, что myposts зависит от результата выборки, а не наоборот. Поэтому я бы предложил удалить myposts из списка зависимостей.

Перехват useEffect вызывается при myposts обновлении. В финале .then вашей выборки вы обновляете его с помощью setPosts . Лучший способ исправить это — сделать массив зависимостей пустым массивом.
Но это не решит проблему обновления сообщений с сервера, но это также можно сделать с помощью периодической функции setInterval . Это приведет к чему-то вроде приведенного ниже кода.

 const [myposts, setPosts] = useState([]);

const update = fetch('/mypost', {
  headers: {
    cookie: 'access_key',
  },
})
.then((res) => res.json())
.then((data) => {
  // console.log(data);
  setPosts(data.myposts);
});

useEffect(() => {
  update()
  const interval = setInterval(update, 30000)
  return () => clearInterval(interval)
}, []);