更新另一个组件中钩子的属性

Question

这是我的反应代码的简化版本。我有一个这样的钩子：

const [todo, setTodo] = useState();

我的todo看起来像这样：

todo = {
    name: 'Name of my todo list',
    date: 2022-09-19',
    todos: [
        'groceries', 
        'do the laundry'
    ]
}

在我的主要组件中，我将待办事项传递给“todos 组件”：

在我的 todos 组件中，我在 props 上有一个循环来显示具有 todos 值的所有输入

{todos.map(t => {
   <input 
       value={t} 
       onChange={e => {
           t = e.target.value
       }} 
   />
})

但不幸的是它没有更新待办事项。我该怎么做呢？我无法使用 setTodo，因为我位于子组件中，setTodo 管理所有待办事项对象，而我只想更新待办事项列表。我的组件不了解完整的待办事项对象，而只了解待办事项列表。

Answer 1

我无法使用 setTodo

你必须。这是改变状态的唯一方法。

但是，您不一定需要直接在子组件中使用它。想要限制子组件是完全有意义的，这样它就不需要知道整个待办事项对象。为此，您可以传递一个知道如何执行大部分更新的函数，然后让子组件调用该函数，并传入子组件负责的几条信息。

例如：

const Parent = () => {
  const [todo, setTodo] = useState();

  return (
    <Child 
      todos={todos} 
      onChange={(newValue, index) => {
        setTodo(prev => {
          const newArray = [...prev.todos];
          newArray[index] = newValue;
          return {
            ...prev,
            todos: newArray
          };
        });
      })
    />
  );
}

const Child = ({ todos, onChange }) => {
  // ...

  {todos.map((t, i) => {
    <input 
      value={t} 
      onChange={e => {
        onChange(e.target.value, i);
      }} 
    />
  })
}