React + TypeScript 待办列表编辑功能无法保存的问题求助

你的代码里有几个关键问题导致编辑无法保存，直接修改如下：

核心问题点 #

• 没记录当前编辑的任务索引，不知道要更新哪一项
• handleEditSubmit逻辑完全错误，既没更新任务列表，也没退出编辑状态
• 初始化taskList为['']会生成空任务，没必要
• 获取待编辑任务时用find加JSON序列化纯属多余，直接取数组对应索引的值就行

修复后的完整代码 #

import { Box, TextField, Button } from "@mui/material";
import { useState } from "react";

export const List = () => {
  const [task, setTask] = useState("");
  // 初始化空数组，去掉默认空项
  const [taskList, setTaskList] = useState<string[]>([]);
  const [isEditing, setIsEditing] = useState(false);
  // 新增state记录当前编辑的任务索引
  const [currentEditIndex, setCurrentEditIndex] = useState<number | null>(null);

  const handleSubmit = () => {
    if (task.trim() !== "") {
      setTaskList((t) => [...t, task]);
      setTask("");
    }
  };

  // 重写编辑提交逻辑
  const handleEditSubmit = () => {
    if (task.trim() === "" || currentEditIndex === null) return;
    
    // 更新对应索引的任务，遵循React状态不可变原则
    setTaskList(prev => {
      const newList = [...prev];
      newList[currentEditIndex] = task;
      return newList;
    });
    
    // 退出编辑状态，清空输入框，重置编辑索引
    setIsEditing(false);
    setTask("");
    setCurrentEditIndex(null);
  };

  const handleDelete = (index: number) => {
    const deleteTasks = taskList.filter((_, i) => i !== index);
    setTaskList(deleteTasks);
  };

  const handleEdit = (index: number) => {
    setIsEditing(true);
    // 直接取对应索引的任务，去掉多余的序列化操作
    setTask(taskList[index]);
    // 记录当前编辑的索引
    setCurrentEditIndex(index);
  };

  return (
    <Box>
      {isEditing ? (
        <>
          <TextField
            label="Edit Task"
            variant="outlined"
            onChange={(e) => setTask(e.target.value)}
            value={task}
          />
          <Button variant="contained" onClick={handleEditSubmit}>
            Submit Edit
          </Button>
        </>
      ) : (
        <>
          <TextField
            label="New Task"
            variant="outlined"
            onChange={(e) => setTask(e.target.value)}
            value={task}
          />
          <Button variant="contained" onClick={handleSubmit}>
            Submit
          </Button>
        </>
      )}
      <ol>
        {taskList.map((task, index) => (
          <li key={index}>
            <span>{task}</span>
            <button onClick={() => handleDelete(index)}>Delete</button>
            <button onClick={() => handleEdit(index)}>Edit</button>
          </li>
        ))}
      </ol>
    </Box>
  );
};

关键改动说明 #

• 新增currentEditIndex来追踪正在编辑的任务位置，确保知道要修改哪一项
• handleEditSubmit里通过复制原数组并修改对应索引的方式更新任务列表，符合React状态不可变的要求
• 点击编辑时直接用taskList[index]赋值给输入框，去掉多余的序列化操作
• 修复编辑提交后退出编辑状态、清空输入的逻辑
• 初始化taskList为空数组，避免默认空任务的问题

内容的提问来源于stack exchange，提问作者Tony