Javascript基于子集更新对象数组中的特定元素答案

【问题标题】：Javascript update specific element in object array based on subsetJavascript基于子集更新对象数组中的特定元素
【发布时间】：2016-12-19 02:14:32
【问题描述】：

我了解您应该使用 setstate 来更新 React 中的状态。我有一组处于状态的对象，我想更新一个特定的元素。我怎样才能做到这一点。我的数据和代码如下：

var trans = [{
    "_id" : ObjectId("583f6e6d14c8042dd7c979e6"),
    "transid" : 1,
    "acct" : "acct1",
    "transdate" : ISODate("2012-01-31T05:00:00.000Z"),
    "category" : "category1",
    "amount" : 103
},
{
    "_id" : ObjectId("583f6e6d14c8042dd7c2132t6"),
    "transid" : 2,
    "acct" : "acct2",
    "transdate" : ISODate("2012-01-31T05:00:00.000Z"),
    "category" : "category2",
    "amount" : 103
},
{
    "_id" : ObjectId("583f6e6d14c8042dd7c152g2"),
    "transid" : 3,
    "acct" : "acct3",
    "transdate" : ISODate("2012-01-31T05:00:00.000Z"),
    "category" : "category3",
    "amount" : 103
}]

  let transFilter=[];

    trans.forEach(function(el){
        if(parseInt(el.transid).indexOf(parseInt(1))!=-1)
        transFilter.push(el);
    });

    transFilter.category = "category4";

//this is where I'm not sure how to just update the corresponding record to
//the one in transFilter for tmpTrans; the data in trans is a copy of the data in tmpTrans
           this.setState({tmpTrans: transFilter}, function () {
           console.log(tmpTrans);
            });

【问题讨论】：

你能发布你正在使用的实际 React 代码吗？你是对的，在 React 中调用 setState 是更新 React 特定状态的正确方法，从你的代码听起来和看起来你只是在询问如何更新数组中的项目，而不管 React
是的，没错，但我想提供我引用的代码。这更像是一个 javascript 问题，除了我需要在设置状态下进行更新。

标签： javascript arrays object reactjs

【解决方案1】：

map 是一个相当简单的函数，可用于创建修改后的数组。

考虑以下项目数组：

var data = [
  { id: 1, category: 'sports' }, 
  { id: 2, category: 'movies' }
]

如果您想更改 id 为 2 的项目的类别，您可以映射您的数组并使用 Object.assign 创建具有新类别的对象的副本（如果 id 匹配）：

var newData = data.map(item => {
  if (item.id === 2) {
    return Object.assign({}, item, { category: 'food' })
  }
  return item
})

现在使用新生成的数据，您可以简单地设置状态：

this.setState({ data: newData })

【讨论】：

谢谢。这是有道理且有效的，但这是最好的方法吗？我对 React/Javascript 有点陌生，我只是想知道是否有办法避免在我的数据集很大的情况下进行所有循环。我真的只需要更新一条记录，我提前知道它是什么。这只是一个概念问题。
是的，不是的。因为您的数据位于数组中，所以提前知道要更新哪个项目的唯一方法是提前知道索引。这通常是不可能的，因为要存储索引，您现在需要另一个数据结构。您可以改为将数据存储在对象中并直接使用密钥访问该项目。 map 也是一种非常通用的方法。你可以使用find 和slice 的组合来跳过一些迭代
话虽如此，您的瓶颈很可能不是遍历大型数组。如果情况确实如此，那么您可能无论如何都不想将如此大的数组存储在内存中。
有道理。这就是我的想法，但这暂时有效。我可能会回到它，看看有什么可以改变的。再次感谢。