React бесконечные запросы на сервер в useefcte

Рейтинг: 0Ответов: 1Опубликовано: 08.04.2023

У меня есть стейт в который я кладу тудушки, каждый раз когда захожу на страницу срабатывает fetch, когда меняю (например удалялю или добавляю таску) должен отправляться запрос, соответственно стейт с тудушками я положил в зависимости, но из-за этого получается, что внутри эффекта я перезаписываю стейт и этот же стейт у меня в зависимостях и соответственно постоянные запросы, как это переделать подскажите, пробовал в редакс сохранять, но естественно разницы нет, может стейт должен быть в другом компоненте?

  const [todoList, setTodoList] = useState<todoProps[]>([]);
  useEffect(() => {
    if (user.id && isAuth) {
      fetchTodos(user.id).then((data) => setTodoList(data));
    }
  }, [todoList, user.id]);
reactjs axios
Источник: Stack Overflow на русском

Ответы

▲ 0

Хук useEffect следит за изменениями, которые вы ему передаете в списке зависимостей. В вашем коде получается многократный ре-рендер из-за того, что вы обновляете стейт и следите за обновлением этого же стейта.

Поэтому просто сделайте так

const [todoList, setTodoList] = useState < todoProps[] > ([]);

useEffect(() => {
  if (user.id && isAuth) {
    fetchTodos(user.id).then((data) => setTodoList(data));
  }
}, [user.id]);

Если хотите удалить какие-то данные, то можно сделать так

type todo = {
  id: string
}

const [todoList, setTodoList] = useState < todo[] > ([])

const onDelete = (delId: string) => {
  setTodoList((state) => state.filter(({
    id
  }) => id !== delId))
}

Так точно будет ре-рендер