React. js «Ошибка: слишком много повторных отрисовок. React ограничивает количество отрисовок, чтобы предотвратить бесконечное l oop.» - PullRequest
Новая
       7

React. js «Ошибка: слишком много повторных отрисовок. React ограничивает количество отрисовок, чтобы предотвратить бесконечное l oop.»

0 голосов
/ 20 июня 2020

Итак, я работаю над изучением полного стека с помощью React. js с другом. Он очень много помогает мне, но, к сожалению, в ближайшие несколько дней недоступен, поэтому я подумал, что спрошу здесь. Я знаю, что эта проблема связана с тем, как настроен мой useState([]) или что-то в этом роде. Любой совет был бы замечательным. 

import "./App.css";
import AddTodoButton from "./components/AddTodoButton/AddTodoButton";
import { Draggable, Droppable } from 'react-drag-and-drop';
import Todo from "./components/Todo/Todo";

function App() {
  const [todoTodos, setTodoTodos] = useState([]);
  const [inProgressTodos, setInProgressTodos] = useState([]);
  const [doneTodos, setDoneTodos] = useState([]);
  const handleAddTodo = (newTodoToAdd) => {
    setTodoTodos([...todoTodos, newTodoToAdd]);
  };

  const setStateInProgress = (todo) => {
    setInProgressTodos([...inProgressTodos, todo]);
  }

  return (
    <>
      <div className="swimlane-container">
        <Droppable><Swimlane title="Todo" todos={todoTodos} /></Droppable>
        <Droppable types={['todo']} onDrop={setStateInProgress()}><Swimlane title="In progress" todos={inProgressTodos} /></Droppable>
        <Droppable><Swimlane title="Done" todos={doneTodos} /></Droppable>
      </div>
      <div>
        <AddTodoButton onAddTodo={handleAddTodo} />
      </div>
    </>
  );
  
}

export default App;```

1 Ответ

0 голосов
/ 20 июня 2020

Проблема связана с вызовом setStateInProgress() при событии onDrop. Вместо этого вы должны просто отправить ссылку на функцию.

Потому что, когда вы делаете setStateInProgress(), эта функция вызывается во время рендеринга, и в этом состоянии функции обновляется, что вызывает повторный рендеринг. Таким образом, это будет цикл и, следовательно, ошибка.

Внесите изменения, как показано ниже 

<Droppable types={['todo']} onDrop={setStateInProgress}><Swimlane title="In progress" todos={inProgressTodos} /></Droppable>

Надеюсь, это поможет.

...