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

该问题是由于在setStateInProgress()事件上调用onDrop而引起的。相反，您应该只发送函数引用。

因为您执行setStateInProgress()时会在渲染期间调用此函数，并且在此函数状态下正在更新，这将触发重新渲染。因此，这将是一个周期，因此是错误。

进行如下更改

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

希望这会有所帮助。

“ React.js”错误：重新渲染太多。React限制了渲染数量以防止无限循环。“

1 个答案: