this.state.due.map不是函數

Question

我有這個簡單的.map()函數，它引發錯誤this.state.due.map is not a function 。 哪個是此對象的最佳.map() ？

[{…}]

0: {
      amountDue: 354
      avgPrice: 20
    }

<div>
  {this.state.due.map(due => {
    return <p>{due.amountDue}</p>
  })};
</div>

謝謝！ :)

Answer 1

您需要先將該對象轉換為數組，然后才能使用它。 Object.values()應該為您做到這一點（如果您不關心鍵（ 0 ）：

<div>
  {Object.values(this.state.due).map(due => {
    return <p>{due.amountDue}</p>
  })};
</div>

但是，如果對象鍵是某種唯一鍵，我建議使用Object.entries()並將該鍵用作該列表的一部分：

<div>
  {Object.entries(this.state.due).map(([id, due]) => (
    <p key={id}>{due.amountDue}</p>
  ))};
</div>

有關密鑰為何重要的更多信息，請參見列表和密鑰 。

Answer 2

沒有到Object對象的本機映射，但是請注意以下示例：

var myObject = { 'a': 1, 'b': 2, 'c': 3 };

Object.keys(myObject).map(function(key, index) {
  myObject[key] *= 2;
});

console.log(myObject);
// => { 'a': 2, 'b': 4, 'c': 6 }

但是您可以輕松地使用for ...遍歷對象：

var myObject = { 'a': 1, 'b': 2, 'c': 3 };

for (var key in myObject) {
  if (myObject.hasOwnProperty(key)) {
    myObject[key] *= 2;
  }
}

console.log(myObject);
// { 'a': 2, 'b': 4, 'c': 6 }