时间戳

首页 > 解决方案 > 如何在不复制的情况下更改对象状态

reactjs - 如何在不复制的情况下更改对象状态

问题描述

我有一个产品状态对象，它只是为了方便前端，我想减少一个字段，但是当我这样做时，它会创建对象的副本而不是改变实际的对象。什么是 React-y 方法来操作没有重复的字段？

我的下载功能：

  const getDownload = async (id, uid, bucket_prefix, variation) => {
    const getPresignedUrl = functions.httpsCallable('getPresignedUrl')
    await getPresignedUrl({id: id, uid: uid, bucket_prefix: bucket_prefix ? bucket_prefix : '', variation: variation})
      .then(res => {
        if (Object.keys(res.data).length > 0) window.open(res.data, '_blank')
        const intendedObj = ownedProds[id]
        setOwnedProds({
          ...ownedProds,
          
        })
      })
      .catch(err => console.error(err))
  }

的形状ownedProds：

ownedProds = {
  {id}: 
    {
    uid:
    id:
    downloads_remaining:
    ...
    } 
  }
}

我基本上想ownedProds[id]在我的 setState 中定位，并且只是减少ownedProds[id].downloads_remaining一个。我可以做到，但它只是添加了另一个与对象中的键具有相同 ID 的对象。

我可以将 getData 移到 useEffect 之外，然后再次调用它，但随后它再次 ping 我的服务器并重新获取所有数据，并且顺序变得混乱，所以有一个转变，这是一个 PITA 对对象进行排序只是因为我想要改变状态对象中一个对象的一个​​属性。我是不是很傻？我应该再次致电服务器以获得多余的号码吗？

标签： reactjsreact-hookssetstate

解决方案

您可以通过将函数传递给 setState 来实现。该函数将接收先前的值，并返回一个更新的值。所以根据你想做的事情，这样的事情应该可以工作：

setOwnedProds(ownedProds => {
    ownedProds[id].downloads_remaining--;
    // Or any other state manipulation you want to achieve.
    return ownedProds;        
   });

推荐阅读