React子组件更新映射对象对应项属性值问题求助

你的问题核心出在父组件的handleUpdateNameSize函数，存在三个关键错误：

• 直接修改了原state数组（违反React不可变更新原则）
• 错误地给数组本身添加属性，而非定位到对应id的对象修改
• 更新state时返回了对象，而非保持数组类型

修复后的父组件代码 #

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, inputElement) => {
    // 把输入值转成数字（nameSize是数值类型，避免字符串导致样式异常）
    const newSize = Number(inputElement.value);
    // 创建新数组，仅修改匹配id的对象，其余保持不变
    const updatedBanners = banners.map(banner => {
      if (banner.id === id) {
        // 返回新对象，不直接修改原state数据
        return { ...banner, nameSize: newSize };
      }
      return banner;
    });
    // 用新数组更新state，保持类型一致
    bannersUpdate(updatedBanners);
  };
  
  return(
    <section className="banners">
      {banners.map(banner =>
        <Banner 
          key={banner.id}
          id={banner.id}
          name={banner.name}
          nameSize={banner.nameSize}
          updateNameSize={handleUpdateNameSize}
        />
      )}
    </section>
  );
}

关键说明 #

1. 不可变更新：通过map生成新数组，永远不直接修改原state，这是React state更新的核心原则，确保组件能正确触发重新渲染。
2. 精准定位修改：通过banner.id === id匹配目标项，仅对该对象创建副本并更新属性，避免影响其他列表项。
3. 保持state类型一致：始终传入数组类型的新值给bannersUpdate，避免原数组state被替换成对象导致的异常。

子组件小优化（可选） #

可以直接在子组件中处理值的传递，简化父组件逻辑：

const Banner = (props) => {
  return (
    <div className="banCont">
      <h2 style={{fontSize: `${props.nameSize}px`}}>{props.name}</h2>
      {/* 直接传递转换后的数值，父组件无需再处理input元素 */}
      <input onChange={(e) => props.updateNameSize(props.id, Number(e.target.value))}  className={`slider1-${props.name}`} />
    </div>
  )
}

对应的父组件handleUpdateNameSize可简化为：

const handleUpdateNameSize = (id, newSize) => {
  const updatedBanners = banners.map(banner => 
    banner.id === id ? { ...banner, nameSize: newSize } : banner
  );
  bannersUpdate(updatedBanners);
};

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