Javascript更新基於子集的對象數組中的特定元素

我知道您應該使用setstate更新React中的狀態。我有一個狀態對象數組，我想更新一個特定的元素。我怎樣才能做到這一點。我的數據和代碼如下：Javascript更新基於子集的對象數組中的特定元素

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

來源

2016-12-19 mo_maat

你能發佈你正在使用的實際React代碼嗎？在React中調用'setState'是更正React特定狀態的正確方法是正確的，它聽起來像從代碼中看到的那樣，只是詢問如何更新數組中的項目，而不考慮React – azium

是的，這是正確的，但我想提供我參考的代碼。它更像是一個javascript問題，除了我需要在set狀態下進行更新之外。 –

map是你可以用它來創建一個修改過的數組一個相當簡單的功能。

考慮以下項目數組：

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

如果你想改變項目有2個ID的類別可以映射在你的數組，並使用Object.assign來創建對象的副本與新類別，如果ID匹配：

this.setState({ data: newData })

：

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

你可以簡單的設置狀態的新崛起的數據

現在

來源

2016-12-19 02:48:00 azium

謝謝。這是有道理的，但是這是做這件事的最好方法嗎？我對React/Javascript有點新鮮，我只是想知道是否有辦法避免在我的數據集很大的情況下進行循環。我真的只需要更新一條記錄，事先知道它是什麼。這只是一個概念性問題。 –

是的沒有。由於您的數據位於數組中，因此提前知道要更新哪個項目的唯一方法就是提前知道索引。這通常是不可能的，因爲存儲您現在需要的索引現在是另一個數據結構。您可以將數據存儲在一個對象中，並直接使用該鍵訪問該項目。另外'map'是這樣做的一個非常普遍的方式。你可以結合使用'find'和'slice'來跳過一些迭代 – azium

也就是說，你的瓶頸很可能不會迭代到一個大數組中。如果真的成爲這種情況，你可能不希望在存儲器中存儲這麼大的數組。 – azium

Javascript更新基於子集的對象數組中的特定元素

回答

相關問題