嵌套陣列內的 map 陣列

Question

我有一個帶有另一個嵌套數組的數組，我需要 map 過來。 我想我幾乎得到了它，但我沒有取回該數據，只能看到它的 object。 查看新索引，我可以看到它正在循環 object 數組中的對象數量。

這是我目前擁有的：

class Menu extends Component {
    constructor(props) {
        super(props);
        const arrayItems = [this.props.items.edges]
        arrayItems.map((currentItem, index) => {
            console.log("The current iteration is: " + index)
            console.log("The current item is: " + currentItem)
            return currentItem.map((newCurrentItem, newIndex) => {
                console.log("The NEW current iteration is: " + newIndex)
                console.log("The NEW current item is: " + newCurrentItem)
                return newCurrentItem
            })
        })

...
}

這是我在控制台中看到的屏幕截圖，看起來很有希望：

有人可以指出我正確的方向嗎？

Answer 1

實際上， currentItem在您的代碼中等於this.props.items.edges ，因此您可以只使用 map this.props.items.edges 。

newCurrentItem顯示為[object Object]是因為 [object Object] 是什么意思？ （JavaScript） 。

所以你可以像往常一樣從CurrentItem中獲取數據。

您的代碼可以簡化為：

class Menu extends Component {
    constructor(props) {
        super(props);
        const arrayItems = this.props.items.edges
        return arrayItems.map((currentItem) => {
            return currentItem.id // or other attributes you what
        })

...
}

Answer 2

在我看到你的命令在 state 按字母順序排序項目之后，我相信 map 節點值應該是你想要的。

  const newCurrentItem = [{ node: "abc" }, { node: "def" }];

  // [Object, Object]
  console.log(newCurrentItem);

  // ["abc", "def"]
  console.log(
    newCurrentItem.map((data) => {
      return data.node;
    })
  );

  const newCurrentItem2 = [{ node: { aaa: "bbb" } }, { node: { aaa: "yyy" } }];

  // [Object, Object]
  console.log(newCurrentItem2);

  // ["bbb", "yyy"]
  console.log(
    newCurrentItem2.map((data) => {
      return data.node.aaa;
    })
  );

碼沙箱

Answer 3

嘗試arrayItems.forEach(currentItem => { //do something })你也可以使用.map在這種情況下你需要提取像@eux說的任何屬性的值