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

Question

我有一个产品状态对象，只是为了方便前端，我想减少一个字段，但是当我这样做时，它会创建对象的 副本，而不是改变实际的目的。什么是 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:
    ...
    } 
  }
}

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

我可以将 getData 移出 useEffect 并再次调用它，但随后它再次 ping 我的服务器并再次获取 all 数据，订单得到搞砸了，所以有一个转变，这是一个对对象进行排序的 PITA，只是因为我想改变状态对象中一个对象的 one 属性。我是不是很傻？我是否应该再次调用服务器以获得多余的号码？

Answer 1

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

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