React DnD useDrop 调用方法时未使用当前状态

Question

我正在尝试创建一个具有拖放项目功能的待办事项应用程序。我正在使用React DND并且到目前为止一切正常，但是当将新项目添加到列表中时，我意识到useDrop 中的“drop”方法中调用的函数只会使用页面首次加载时的状态向上。没有其他组件存在此问题，当我尝试使用简单的 onClick 来检查同一组件的状态时，也会记录正确的状态。其他组件（例如插入新任务的组件）根本没有问题，这只发生在使用React DND的组件上。我还检查了 Chrome 中的 React 开发工具，可以确认状态也在更新。
在“drop”中调用的函数是从两个组件向上传递的，我尝试使用的状态也在该组件中。任何帮助将不胜感激。谢谢。

export const ToDo = ({
  status,
  todoText,
  todoID,
  deleteTodo,
  updateTodoStatus,
  resortList,
}: TodoProps) => {
  const [, drag] = useDrag(() => ({
    type: 'TODO_DRAG',
    item: { todoID, todoText },
  }));

  const [, drop] = useDrop(() => ({
    accept: 'TODO_DRAG',
    drop: (droppedTodo: dropAndDropItem) => {
      console.log('dropping');
      if (todoID === droppedTodo.todoID) return;
      resortList(todoID, droppedTodo.todoID);
    },
  }));

  return (
    <li ref={drop} onClick={() => resortList(1, 2)}>
      <div ref={drag}>
        <label htmlFor="Change Todo Status">
          <input
            type="checkbox"
            checked={status}
            onChange={() => updateTodoStatus(todoID)}
          />
        </label>
        <p>{todoText}</p>
        <button onClick={() => deleteTodo(todoID)}>X</button>
      </div>
    </li>
  );
};

Answer 1

嗨，过去两天我也遇到了同样的问题。尝试这个来解决您的问题。

const [, drop] = useDrop(() => ({
accept: 'TODO_DRAG',
drop: (droppedTodo: dropAndDropItem) => {
  console.log('dropping');
  if (todoID === droppedTodo.todoID) return;
  resortList(todoID, droppedTodo.todoID);
},}),[todoID]);

如果没有 [todoID] drop 将不会“看到”更新状态，但我现在真的不知道为什么。