如何通过唯一ID在React的setState中修改数组内对象属性？

你的React状态定义如下：

const [speakers, setSpeakers] = useState([
    {
      id: nanoid(),
      name: "",
      title: "",
      position: "",
      description: ""
    }
  ])

你需要为每个演讲者的表单添加照片上传裁剪功能，将base64字符串存入对应对象的photo属性，但当前通过索引修改状态的方式存在问题：添加第二个演讲者后，更新照片会删除第一个对象。

当前错误的更新逻辑：

const getBase64Image = data => {
    imageRef.current.src = data
    let index = imageRef.current.id
    
    setSpeakers([
      {
        ...speakers[index],
        photo: data
      }
    ])
  }

问题原因 #

你直接用仅包含更新后对象的数组替换了原speakers数组，没有保留其他未修改的对象，导致原有数据被覆盖删除。

解决方案 #

正确的做法是基于唯一ID匹配目标对象，遍历数组生成新数组——仅更新目标对象的photo属性，其余对象保持不变，同时遵循React状态不可变更新的原则。

修改后的getBase64Image函数：

const getBase64Image = (data) => {
  imageRef.current.src = data;
  // 确保imageRef.current.id存储的是对应演讲者的唯一ID（而非索引）
  const targetId = imageRef.current.id;

  // 使用函数式更新，确保基于最新状态修改
  setSpeakers(prevSpeakers => 
    prevSpeakers.map(speaker => {
      // 匹配到目标ID时，更新photo属性
      if (speaker.id === targetId) {
        return { ...speaker, photo: data };
      }
      // 非目标对象直接返回原数据
      return speaker;
    })
  );
};

补充说明 #

1. 函数式更新：使用prevSpeakers => ...的形式，确保你总是基于最新的状态进行修改，避免闭包导致的状态过期问题。
2. 唯一ID匹配：相比索引，用nanoid()生成的唯一ID来匹配对象更可靠，尤其是在数组有增删操作时，索引可能会发生混乱。
3. 不可变更新：通过map生成新数组，通过扩展运算符...复制原对象属性再修改，不直接修改原状态数据，符合React的状态更新规则。

如果需要更新其他表单字段（如name、title），可以复用类似的逻辑：

const updateSpeakerField = (speakerId, fieldName, value) => {
  setSpeakers(prevSpeakers => 
    prevSpeakers.map(speaker => 
      speaker.id === speakerId 
        ? { ...speaker, [fieldName]: value } 
        : speaker
    )
  );
};

使用示例：

<input
  value={speaker.name}
  onChange={(e) => updateSpeakerField(speaker.id, 'name', e.target.value)}
/>

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