React待办列表编辑组件失效：修改项值无变化

你的代码存在数据流传递错误和状态逻辑混乱的问题，导致编辑后的数据无法正确同步到顶层状态。以下是具体问题和修复方案：

关键错误点 #

1. EditText组件未向外传递输入变化
   EditText内部维护了editedText状态，但没有将输入的变化传递给父组件（EditButton），导致EditButton的编辑状态永远不会更新。

2. EditButton调用onEdit时参数格式错误
   Task组件的handleEditClick期望接收taskId和EditedItem两个参数，但EditButton里调用onEdit时只传了一个对象，参数不匹配。

3. 顶层handleEditTask更新了错误的属性
   你的数据结构是{id, item}，但handleEditTask里却把属性改成了text，导致更新后的数据无法正确渲染。

4. 冗余的isEditing状态
   Task组件已经有isEditing状态控制编辑视图，EditButton内部又重复维护了一份isEditing，导致状态逻辑混乱。

修复后的完整代码 #

1. EditText组件（修复onChange传递） #

import React, { useState } from 'react';

export function EditText({ text, onChange }) {
  const [editedText, setEditedText] = useState(text);

  const handleTextChange = (event) => {
    const newValue = event.target.value;
    setEditedText(newValue);
    // 将输入变化传递给父组件
    onChange(newValue);
  };

  return (
    <div>
      <input type="text" value={editedText} onChange={handleTextChange} />
    </div>
  );
}

2. EditButton组件（移除冗余状态，修正参数传递） #

import React, { useState } from 'react';
import { EditText } from './EditText';

export function EditButton({ item, onEdit }) {
  const [editedItem, setEditedItem] = useState(item.item);

  const handleSaveClick = () => {
    // 传递taskId和新的item值
    onEdit(item.id, editedItem);
  };

  const handleCancelClick = () => {
    // 重置为原始值
    setEditedItem(item.item);
  };

  const handleTextChange = (newValue) => {
    setEditedItem(newValue);
  };

  return (
    <div>
      <EditText text={editedItem} onChange={handleTextChange} />
      <button onClick={handleSaveClick}>Save</button>
      <button onClick={handleCancelClick}>Cancel</button>
    </div>
  );
}

3. Task组件（简化状态逻辑） #

import { DeleteButton } from './Delete-Button';
import { useState } from 'react';
import { EditButton } from './Edit'

export function Task({ item, onDelete, onEdit }) {
  const [isEditing, setIsEditing] = useState(false);

  function handleDeleteClick () {
    onDelete(item.id);
  };

  // 接收EditButton传递的id和新值，调用顶层onEdit
  function handleEditClick (taskId, editedValue) {
    onEdit(taskId, editedValue);
    setIsEditing(false);
  }

  return (
    <>
      <li>
        {isEditing ? (
          <EditButton item={item} onEdit={handleEditClick} />
        ) : (
          <div>
            <span>{item.item}</span>
            <button onClick={() => setIsEditing(true)}>Edit</button>
          </div>
        )}
        <DeleteButton onClick={handleDeleteClick} />
      </li>
    </>
  );
}

4. ToDoList组件（修正属性名称） #

import './App.css';
import { useState } from 'react';
import { AddTask } from './components/Add-Task';
import {itemsList} from "./listArray";
import { Task } from './components/TaskElement';

function ToDoList() {
  const [todos,setTodos] = useState([...itemsList]);

  const handleAddTask = (newTask) => {
    const lastId = todos.length > 0 ? todos[todos.length - 1].id : 0;
    const newId = lastId + 1;
    const newTaskObj = { id: newId, item: newTask };
    setTodos([...todos, newTaskObj]);
  };
  
  function handleDeleteTask(taskId) {
    const updatedTodos = todos.filter((item) => item.id !== taskId);
    setTodos(updatedTodos);
  }

  const handleEditTask = (taskId, editedText) => {
    const updatedTasks = todos.map((task) => {
      if (task.id === taskId) {
        // 正确更新item属性，匹配数据结构
        return { ...task, item: editedText };
      }
      return task;
    });
    setTodos(updatedTasks);
  };
 
  return (
    <>
      <AddTask onAdd={handleAddTask}/>
      <ul>
        {todos.map(task => (
          <Task 
            key={task.id}
            item={task} 
            onDelete={() => handleDeleteTask(task.id)}
            onEdit={handleEditTask}
          />
        ))}
      </ul>
    </>
  )
}

export default ToDoList;

修复说明 #

• 让EditText组件通过onChange回调将输入值传递给父组件，确保编辑状态能同步到EditButton。
• 移除EditButton内部的isEditing状态，统一由Task组件控制编辑视图的显示。
• 修正handleEditTask中的属性名称，从text改为item，匹配你的数据结构。
• 统一参数传递格式，确保从EditButton到Task再到顶层的数据流一致。

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