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

您的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}

Answer 2

代码的逻辑基本上是返回更新任务的集合。

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

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

似乎您要在此处返回一个数组（许多任务不是一个任务，而是许多任务），因此这会在以后导致重复键错误

 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)}
      />

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

2 个答案: