React.js “錯誤：重新渲染太多。 React 限制了渲染的數量以防止無限循環。”

Question

所以我正在和一個朋友一起學習使用 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;```

Answer 1

問題是因為在onDrop事件上調用setStateInProgress() 。 相反，您應該只發送 function 參考。

因為當您執行setStateInProgress()時，此 function 在渲染期間被調用，而在此 function state 正在更新，這將觸發重新渲染。 所以這將是一個循環，因此會出現錯誤。

進行如下更改

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

希望這可以幫助。