使用唯一id修改setState中的对象属性？

Question

我正在尝试根据唯一的 id 属性更新数组中的对象属性。 例如我有这个状态：

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

我有一张卡片，里面有一个表单，3个文本输入，1个文本区域输入，最后一块是一个字段，我可以在其中上传照片，裁剪它，获取base64字符串，现在我想将此值保存在正确形式内的照片属性。我创建了一个“添加新演讲者”按钮，并编写了一些代码来添加新卡片（带有表单），以及一个删除按钮，用于删除特定的卡片。所有这些都工作得很好，我的问题的重点是，在裁剪图像后，我希望我的状态看起来像这样：

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

我知道这是错误的，但我使用的是索引，而不是唯一的ID，但这是我到目前为止所拥有的，这是行不通的。

const getBase64Image = data => {
    imageRef.current.src = data
    let index = imageRef.current.id
    
    setSpeakers([
      {
        // object that we want to update
        ...speakers[index],
        photo: data // update the value of specific key
      }
    ])
  }

只需知道

data

，是base64字符串。它在第一次尝试时有效，但如果我添加第二个扬声器/卡/表格，它会删除第一个对象，并且表现得很奇怪。需要明确的是，最后，我应该拥有/想要这个：

const [speakers, setSpeakers] = useState([
    {
      id: "123",
      name: "Bob",
      title: "",
      position: "",
      description: "",
      photo: "base64 string here"
    },
    {
      id: "456",
      name: "Peter",
      title: "",
      position: "",
      description: "",
      photo: "new base64 string here"
    },
    {
      id: "789",
      name: "Tim",
      title: "",
      position: "",
      description: "",
      photo: "new new base64 string here"
    },
  ])

来自 Vue，React 新手，谢谢！！

Answer 1

您当前的 setState 仅返回一个包含一个元素的数组。我想，你想找到 id === index 的那个，然后将 photo 道具添加到其中，并保留其他数组条目不变。由于 React 的不可变规则，您需要创建一个全新的对象。所以，

setSpeakers(curSpeakers => curSpeakers.map(s => 
  s.id === index ? {...s, photo: data} : s
));