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

b4lqfgs4 于 2023-11-15 发布在 Java

关注(0)|答案(2)|浏览(100)

我尝试根据唯一id属性更新数组中的对象属性。例如，我在state中有：

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新手，谢谢！！

JavaScript

来源：https://stackoverflow.com/questions/77484702/modify-object-property-in-setstate-using-unique-id

2条答案

按热度按时间

dfuffjeb1#

你当前的setState只返回了一个有一个元素的数组。你想找到id = index的那个，我想，然后把photo prop添加进去，其他数组条目保持原样。你需要创建一个全新的对象，因为React的不可变规则。所以，

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

字符串

赞(0）回复(0）举报 2023-11-15

8ftvxx2r2#

代码的编写方式是，当setState被调用时，它将用正在更新的一个条目替换数组的整个内容。您必须基于索引更新数组（浅拷贝），然后更新状态中的值。

现有代码

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
      }
    ])
  }

字符串

更新代码

const getBase64Image = data => {
    imageRef.current.src = data;
    let indexToUpdate = imageRef.current.id;

    const updatedSpeakersData = speakers.map((speaker, index) => {
        const itemData = speakers[index];

        if(index === indexToUpdate) {
            return {
                ...itemData,
                photo: data
            }
        }

        return {
            ...itemData;
        }
    });
    
    setSpeakers(updatedSpeakersData)
  }

型

赞(0）回复(0）举报 2023-11-15

我来回答

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

2条答案

相关问题

热门标签

最新问答