如何在不制作副本的情况下更改状态中的对象

Question

我有一个产品状态对象，只是为了简化前端，我想减少一个字段，但是当我这样做时，它创建了一个对象的 copy而不是改变实际对象。没有重复操作字段的 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 少一个。我可以做到，但它只是添加了 另一个 与对象中的键具有相同 ID 的对象。

我可以将 getData 移到 useEffect 之外并再次调用它，但随后它再次 ping 我的服务器并获取 all 数据一遍又一遍，顺序被打乱了，所以有一个转变，它是一个 PITA 来排序对象只是因为我想改变状态中一个对象的 one 属性目的。我是不是很傻？我是否应该再次调用服务器以获取多余的号码？

Answer 1

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

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

如何在不制作副本的情况下更改状态中的对象

How to change object in state without making a copy

setstate

reactjs

react-hooks