时间戳

首页 > 解决方案 > 如何使用修改后的值更新当前选择的待办事项？

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

问题描述

我正在制作一个待办事项应用程序来通过钩子提高我的反应技能，我想制作一个函数 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("");
  }

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

标签： reactjseditreact-hooks

解决方案

您的函数中有错误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}

推荐阅读