如何使当前选择的待办事项更新为修改后的值？

Question

我正在制作一个待办事项应用程序以提高我的钩子反应技能，我想制作一个函数 updateTask 以在触发 getCurrentTask 函数后使用我在输入中键入的任何内容更新当前选定的任务，这会填充输入值与当前选定任务的文本值。

这是 updateTask 函数：

function updateTask(statePlaceholder, id) {
  const updatedTaskIndex = statePlaceholder.tasks.findIndex(
    task => task.id === id
  );
  const updatedTask = statePlaceholder.tasks.map(task => {
    return { ...task, text: statePlaceholder.currentTask.text };
  });
  const updatedTasks = [
    ...statePlaceholder.tasks.slice(0, updatedTaskIndex),
    updatedTask,
    ...statePlaceholder.tasks.slice(updatedTaskIndex + 1)
  ];

  return {
    ...statePlaceholder,
    tasks: updatedTasks,
    currentTask: null
  };
}

我在表单的 handleSubmit 函数中使用了这个函数

function handleSubmit(e) {
    e.preventDefault();

    state.currentTask
      ? setState(updateTask(state, state.currentTask.id))
      : setState(createTask(state, value));

    setValue("");
  }

我希望能够更新当前选择的任务。

Answer 1

您的代码逻辑基本上是返回一组更新任务。

然后问题是您的 statePlaceholder.tasks 列表中有重复的键

为什么需要替换 all 中的文本 statePlaceholder.tasks,

看来你在这里返回了一个数组（许多任务而不只是一个任务）所以这会导致稍后重复键错误

 const updatedTask = statePlaceholder.tasks.map(task => {
    return { ...task, text: statePlaceholder.currentTask.text };
  });

最好改为：

      const updatedTask = statePlaceholder.tasks.filter(task => task.id === id)
      updatedTask.text= statePlaceholder.currentTask.text;

      const updatedTasks = [
        ...statePlaceholder.tasks.slice(0, updatedTaskIndex),
        updatedTask,
        ...statePlaceholder.tasks.slice(updatedTaskIndex + 1)
      ];

所以我查看了您在沙箱中发布的代码，问题是函数 updateTask(statePlaceholder, id)

参数 id 未定义，然后更新了 TaskIndex -> -1

您在这里只设置了任务的名称，而不是对象（带有 id）：

  <input
        type="text"
        className="App_input"
        placeholder="Type Task"
        value={value}
        onChange={e => setValue(e.target.value)}
      />

Answer 2

您的 updateTask 函数有一个错误，但在此之前有一个建议。

看起来你正在使用复合状态，比如

[state, setState] = useState({tasks:[], current:0})

相反，更惯用的方法是使用单独的状态变量：

[tasks, setTasks] = useState([]);
[current, setCurrent] = useState(0);

这也将使您的状态管理更加容易。

现在回到 updateState 中的错误，在检索 updatedTaskIndex 后，您需要 1) 检索 originalTask、2) 对其进行变异和 3) 将其放回正确的位置新数组中的位置。你没有做#1，因此你尝试的#2 会产生错误的结果。做一些像

origTask = tasks[taskIndex];
updatedTask = {...origTask, text: text}

如何使当前选择的待办事项更新为修改后的值？

How can I make the currently selected todo get updated with the modified value?

reactjs

edit

react-hooks