如何在reactJS中映射字典？

Question

我正在以{{key：object}，{key：object}的形式從在線api獲取字典，...對於類似1000對象}。 我想用reactJS來做類似的事情

this.props.dict.map(function(object, key)){
 //Do stuff
}

此映射適用於數組，但它顯然不適用於字典。 我怎樣才能達到類似的效果？

Answer 1

Javascript中的“字典”稱為對象，您可以以與數組非常相似的方式迭代它們。

var dict = this.props.dict;

for (var key in dict) {
  // Do stuff. ex: console.log(dict[key])
}

如果你正在考慮使用map，那么在迭代結束時你有一個完整的數組，然后在你的for..in循環中你可以推送到你之前聲明的數組。

var dict = this.props.dict;
var arr = [];

for (var key in dict) {
  arr.push(dict[key]);
}

Answer 2

如果您以現代瀏覽器為目標或使用某種類型的轉換器，您可以使用Object.entries在單次迭代中映射[key, value]對。

 const obj = { foo: 'bar', baz: 42 } console.log('Object.entries') console.log( Object.entries(obj) ) console.log('Mapping') console.log( Object.entries(obj) .map( ([key, value]) => `My key is ${key} and my value is ${value}` ) ) 

---

與React一起使用

Object.entries函數非常方便React，因為默認情況下沒有對象/字典的簡單迭代。 React要求您在迭代時為組件分配鍵，以便執行它的diffing算法。 通過使用Object.entries您可以利用已經鍵入的集合，而無需在數據中手動注入鍵或使用數組索引，這可能會在過濾，刪除或添加項目后索引發生更改時導致意外行為。

請參閱以下使用React的Object.entries用法示例：

 const buttonCaptions = { close: "Close", submit: "Submit result", print: "print", } const Example = () => <div> { Object.entries(buttonCaptions) .map( ([key, value]) => <button key={key}>{value}</button> ) } </div> ReactDOM.render(<Example />, document.getElementById('react')); 

 <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

---

常見的語法錯誤

作為旁注，請記住，在映射Object.entries結果時，必須在使用數組解構時將數組參數包裝在括號中。 以下代碼將拋出語法錯誤：

 console.log( Object.entries({key: 'value'}) .map([key, value] => `${key}: ${value}`) ) 

改為：

 console.log( Object.entries({key: 'value'}) .map( ([key, value]) => `${key}: ${value}` ) ) console.log( Object.entries({key: 'value'}) .map(keyValuePair => `${keyValuePair[0]}: ${keyValuePair[1]}`) ) 

---

兼容性

有關當前瀏覽器支持，請參閱2017功能>對象靜態方法下的ECMAScript兼容性表 。

Answer 3

如果你想像Object.getOwnPropertyNames()一樣使用map ，那么一個選項就是Object.getOwnPropertyNames() ：

var newArr = Object.getOwnPropertyNames(this.props.dict).map(function(key) {
    var currentObj = this.props.dict[key];
    // do stuff...
    return val;
});

Answer 4

假設你的意思是： {key: object, key2: object}

你可以做類似的事情（不確定與getOwnPropertyNames的確切差異，但它應該做同樣可能性能較差）：

Object.keys(this.props.dict)
    .map(function(key)){ 
         var object = this.props.dict[key]
         //Do stuff
     })

編輯：

• Object.getOwnPropertyNames vs Object.keys

如果您只想要對象的可枚舉使用Object.keys