Блог

Главная - Вопросы по программированию - Ошибка: Слишком много повторных рендеров. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл [другой вариант]

Ошибка: Слишком много повторных рендеров. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл [другой вариант]

#reactjs

Вопрос:

Я прочитал несколько статей на эту тему, но это не помогло. Я думаю, что моя проблема немного в другом

Вот мой код:

 import React, { useEffect } from 'react';
import { useState } from 'react';
import { useSelector } from 'react-redux';
import store from '../../store';
import ToDoAdder from '../ToDoAdder/ToDoAdder';

function ToDoList() {
  const [users, setUsers] = useState([]);
  const [todosState, setTodosState] = useState([]);

  useEffect(() => {
    fetchUsers();
    fetchData();
  }, []);

  const fetchUsers = async () => {
    const data = await fetch(`https://jsonplaceholder.typicode.com/users/`);
    const res = await data.json();
    console.log(res, 0);
    setUsers(res);
  };

  const fetchData = async () => {
    const data = await fetch('https://jsonplaceholder.typicode.com/todos/');
    const res = await data.json();

    const needed = res.slice(0, 10);
    setTodosState(needed);

    return res;
  };

  console.log(todosState);
  const todosWithUser = todosState.map((o) => {
    const user = users.filter((i) => o.userId === i.id)[0];
    o.user = user;
    return o;
  });

  store.dispatch({ type: 'add/todoArray', payload: { todos: todosWithUser } });

  const todos = useSelector((store) => store.toDos);
  // console.log(todos);
  return (
    /* some statement */
  );
}

export default ToDoList;

Скажите мне, как я могу это решить ? Я знаю, что моя проблема в штате Сеттодос, но я не могу ее решить

Ответ №1:

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

 useEffect(() => {
  const todosWithUser = todosState.map((o) => {
    const user = users.filter((i) => o.userId === i.id)[0];
    o.user = user;
    return o;
  });

  store.dispatch({ type: "add/todoArray", payload: { todos: todosWithUser } });
}, [todosState]);

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

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

2. @viet Ты спасла мне жизнь, огромное спасибо.

Ответ №2:

Вот в чем проблема с вашим кодом:

 store.dispatch({ type: 'add/todoArray', payload: { todos: todosWithUser } });

При каждом ToDoList отображении эта отправка будет вызываться, вызывая изменение состояния redux, и у вас также есть этот селектор в коде:

 const todos = useSelector((store) => store.toDos);

Таким образом, он снова будет визуализироваться, ToDoList делая цикл визуализации бесконечным

Так что давайте вложим вашу отправку в EventHandler или в крюк Useefect.

Метки: ,