React子组件中更新父组件Hook的待办事项数组属性解决方案咨询

这个问题属于React单向数据流里的典型场景——子组件没有权限直接修改父组件的状态，再加上你这里子组件只拿到了todos数组的副本，没有完整的todo对象和setTodo方法，所以直接修改数组元素完全无效。下面给你一个清晰可行的解决方案：

1. 父组件定义更新回调，传递给子组件 #

首先在主组件里创建一个专门更新单个todo项的函数，它会利用setTodo来更新完整的todo对象，同时保留其他属性不变。然后把这个函数和todos数组一起传给子组件：

import { useState } from 'react';

const ParentComponent = () => {
  const [todo, setTodo] = useState({ 
    name: 'Name of my todo list', 
    date: '2022-09-19', 
    todos: [ 'groceries', 'do the laundry' ] 
  });

  // 定义更新单个todo项的回调函数
  const handleUpdateTodo = (itemIndex, newItemValue) => {
    setTodo(prevTodo => {
      // 复制原todos数组，避免直接修改原状态（React状态不可变）
      const updatedTodos = [...prevTodo.todos];
      // 修改对应索引的项
      updatedTodos[itemIndex] = newItemValue;
      // 返回新的todo对象，保留其他属性
      return { ...prevTodo, todos: updatedTodos };
    });
  };

  return (
    <div>
      {/* 传递todos和更新回调给子组件 */}
      <TodosComponent todos={todo.todos} onUpdateTodo={handleUpdateTodo} />
    </div>
  );
};

2. 子组件通过回调触发状态更新 #

在子组件里，循环todos时要拿到每个项的索引，然后在输入框的onChange事件里调用父组件传过来的onUpdateTodo，把索引和新的输入值传回去。另外记得给每个输入框加上key（这里用索引是最简单的方式，如果你的todo项有唯一ID，用ID会更稳妥）：

const TodosComponent = ({ todos, onUpdateTodo }) => {
  return (
    <div>
      {todos.map((todoItem, index) => (
        <input
          key={index}
          type="text"
          value={todoItem}
          onChange={(e) => onUpdateTodo(index, e.target.value)}
        />
      ))}
    </div>
  );
};

为什么这样能解决问题？ #

• 符合React单向数据流原则：父组件统一管理状态，子组件只负责渲染和触发更新事件，所有状态更新都由父组件处理，避免了状态混乱。
• 使用setTodo的函数式更新（prevTodo => ...）是为了确保我们基于最新的状态进行修改，避免异步更新导致的状态不一致问题。
• 复制原todos数组（[...prevTodo.todos]）是因为React要求状态不可变——直接修改原数组不会触发组件重新渲染，必须返回新的数组/对象才能让React感知到状态变化。

你之前的代码为什么无效？ #

你之前直接写t = e.target.value没用的原因：

• 这里的t是数组元素的值类型副本（字符串是值类型），修改它不会影响原数组。
• 就算是引用类型，直接修改也不会触发父组件的状态更新，因为React只有通过setState方法才能追踪状态变化。

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