React 从子组件更新映射对象中的值

Question

使用 React，我已经能够从子组件中创建的

onChange()

更新存储在父组件中的对象的值。

但是，我尝试对从映射对象列表创建的组件执行相同的操作，因此它仅更新构建该组件的对象列表中的值。我失败了，但这是我正在做的一个例子：

父组件：

const Parent = () => {
  const [banners, bannersUpdate] = React.useState([
    {
      id: 1, name: "banner1", nameSize: 14
    },
    {
      id: 2, name: "banner2", nameSize: 16
    },
    {
      id: 3, name: "banner3", nameSize: 18
    }
  ]);
  
  
  const handleUpdateNameSize = (id, e) => {
    banners.nameSize = e.value
    bannersUpdate({
        nameSize: banners.nameSize,
        ...banners
    })
  }
  
  
  return(
    <section className="banners">
      {banners.map(banner =>
        <Banner 
          key={banner.id}
          id={banner.id}
          name={banner.name}
          nameSize={banner.nameSize}
          updateNameSize={handleUpdateNameSize}
        />
      )}
    </section>
  );
}

子组件：

const Banner = (props) => {
  return (
    <div className="banCont">
      <h2 style={{fontSize: props.nameSize + 'px'}}>{props.name}</h2>
      <input onChange={(e) => props.updateNameSize(props.id, e.target)}  className={'slider1-' + props.name} />
    </div>
  )
}

通过上述内容，它不会更新与该横幅相关的对象项，而是仅在顶层添加一个具有该名称和值的新对象项。

我相信答案依赖于使用

key

的某个地方，并且我尝试用

banners

替换所有

banners[id]

，例如：

banners[id].nameSize = e.value

但由于某种原因，它无法更新该值。

请提供帮助，谢谢。

Answer 1

const Parent = () => {
  const [banners, setBanners] = React.useState([
    {
      id: 1, name: "banner1", nameSize: 14
    },
    {
      id: 2, name: "banner2", nameSize: 16
    },
    {
      id: 3, name: "banner3", nameSize: 18
    }
  ]);

  const handleUpdateNameSize = (id, value) => {
    setBanners(prevBanners =>
      prevBanners.map(banner =>
        banner.id === id ? { ...banner, nameSize: value } : banner
      )
    );
  };

  return (
    <section className="banners">
      {banners.map(banner => (
        <Banner 
          key={banner.id}
          id={banner.id}
          name={banner.name}
          nameSize={banner.nameSize}
          updateNameSize={handleUpdateNameSize}
        />
      ))}
    </section>
  );
};

const Banner = (props) => {
  return (
    <div className="banCont">
      <h2 style={{ fontSize: props.nameSize + 'px' }}>{props.name}</h2>
      <input
        type="range"
        min="10"
        max="50"
        value={props.nameSize}
        onChange={(e) => props.updateNameSize(props.id, e.target.value)}
        className={'slider1-' + props.name}
      />
    </div>
  );
};

问题：

问题在于 React 中更新数组内嵌套对象状态的方法不正确。最初的尝试涉及直接修改数组（横幅），然后尝试使用不完整且不正确的结构更新状态，从而导致状态不一致和意外行为。在 React 中，状态更新必须以不可变的方式执行，以确保正确的反应性和渲染。这意味着创建一个包含更新对象的新数组，而不是直接改变现有数组。

您可以在这里阅读更多相关信息https://reacttraining.com/blog/state-in-react-is-immutable