使用 React 钩子，我如何更新通过道具传递给孩子的对象？

Question

父组件包含一个对象数组。 它映射数组并为每个对象返回一个子组件，并用该对象的信息填充它。 在每个子组件内部都有一个输入字段，我希望它允许用户更新对象，但我不知道如何去做。 在钩子、道具和对象不变性之间，我在概念上迷失了方向。 这是父组件的简化版本：

const Parent = () => {
  const [categories, setCategories] = useState([]);

  useEffect(()=>{
    // makes an axios call and triggers setCategories() with the response
  }

  return(
    categories.map((element, index) => {
      return(
        <Child
          key = {index}
          id = {element.id}
          firstName = {element.firstName}
          lastName = {element.lastName}
          setCategories = {setCategories}
    })
  )
}

这是子组件的简化版本：

const Child = (props) => {
  return(
    <h1>{props.firstName}</h1>
    <input
      defaultValue = {props.lastName}
      onChange={()=>{
        // This is what I need help with.
        // I'm a new developer and I don't even know where to start.
        // I need this to update the object's lastName property in the parent's array.
      }}
  )
}

Answer 1

也许在不知情的情况下，您解除了状态：基本上，不是将状态保存在 Child 组件中，而是将其保存在 Parent 中。
这是一个使用过的模式，并没有错：你只是错过了一个句柄函数，它允许孩子更新Parent 的状态：为了做到这一点，你需要在Parent 组件上实现一个handleChange ，然后将其作为道具传递给每个Child。

看看这个代码示例：

const Parent = () => {
    const [categories, setCategories] = useState([]);

    useEffect(() => {
        // Making your AXIOS request.
    }, []);

    const handleChange = (index, property, value) => {
        const newCategories = [...categories];
        newCategories[index][property] = value;

        setCategories(newCategories);
    }

    return categories.map((c, i) => {
        return (
            <Child
                key={i}
                categoryIndex={i}
                firstName={c.firstName}
                lastName={c.lastName}
                handleChange={handleChange} />
        );
    });
}

const Child = (props) => {
    ...

    const onInputChange = (e) => {
        props.handleChange(props.categoryIndex, e.target.name, e.target.value);
    }

    return (
        ...
        <input name={'firstName'} value={props.firstName} onChange={onInputChange} />
        <input name={'lastName'} value={props.lastName} onChange={onInputChange} />
    );
}

你可能不知道的几件事：

• 通过对input 使用属性name，您可以对所有input 元素仅使用一个处理函数。在函数内部，在本例中为 onInputChange，您可以使用 e.target.name 检索该信息；
• 请注意，我在useEffect 中添加了一个空数组依赖项：没有它，useEffect 将在每次渲染时运行。我不认为这是你想要的。
  相反，我希望您仅在挂载组件时才执行请求，这可以通过 n 个空数组依赖项来实现；