为什么编辑任务 function 不适用于我的 function？

Question

我正在开发一个 React 项目，其中有一个可以“编辑”的任务列表。 我的思考过程是当用户点击编辑时，它会用当前任务信息填充表单，当他们点击“保存编辑”时，它只是找到任务所在的键，删除它，然后创建一个新任务新密钥，但所有其他信息都相同。 但是，当我尝试这个时，它似乎不起作用，只是删除了任务。

这是一个片段，希望它有帮助：

var saveHandler = (e) => {
    e.preventDefault();
    props.seteId(props.editTask.id); //set the old task's key
    props.setTasks([ //add our "edited" task to the list with the form info, and new key.
        ...props.tasks,
        {
          text: props.inputText,
          status: props.status,
          id: Math.random() * 1500, //I know this isnt a great way to do it
          priority: props.priority,
        },
      ]);

     props.setTasks(props.tasks.filter((el) => el.id !== props.eId)); //find old task and delete it 

Answer 1

State 异步更新。

您调用props.setTasks两次，但props.tasks的值在它们之间没有变化，因此您正在覆盖（而不是构建）您所做的第一个 state 更改。

改为使用变量来存储中间 state。

const allTasks = [ ...props.tasks, { /* etc */ } ];
const updatedTasks = allTasks.filter( /* etc */ );
props.setTasks(updatedTasks);

同样， props.eId不会及时更新el.id.== props.eId ，因此请在过滤器 function 中使用props.editTask.id而不是props.eId 。

Answer 2

如果我理解您的需求，这应该可以解决您的问题，使用旧 ID props.editTask.id 进行测试

 var saveHandler = (e) => { e.preventDefault(); props.seteId(props.editTask.id); //set the old task's key props.setTasks([ //add our "edited" task to the list with the form info, and new key. ...props.tasks, { text: props.inputText, status: props.status, id: Math.random() * 1500, //I know this isnt a great way to do it priority: props.priority, }, ]); props.setTasks(props.tasks.filter((el) => el.id.== props.editTask;id)); //find old task and delete it