嵌套数组映射答案

【问题标题】：Nested Array Map嵌套数组映射
【发布时间】：2019-08-13 17:33:02
【问题描述】：

class Array extends React.Component {
  constructor() {
        super();
        this.state = {
            newArray: [
                  {
                    "Category": "Category1",
                    "value": [
                      {
                        "Name": "Name1"
                      },
                      {
                        "Name": "Name2"
                      },
                      {
                        "Name": "Name4"
                      }
                    ]
                  },
                  {
                    "Category": "Category2",
                    "value": [
                      {
                        "Name": "Name3"
                      }
                    ]
                  }
                ],
        };
    }

  render() {
    var nestedArray = this.state.newArray.map((title, index) => {
      return(
        <div key={`nestedArray_${index}`}>
          <div key={`category_${title}`}>{title.Category}</div>
        </div>
      )
    })

    return (
      <div>
        <h1>{nestedArray}</h1>
      </div>
    );
  }
}

ReactDOM.render(
  <Array />,
  document.getElementById('root')
);

当前代码的 Codepen：https://codepen.io/anon/pen/GePyBa

我现在的显示是这样的：

类别 1

类别 2

理想情况下，我希望它是：

类别 1

姓名1

名字2

名字4

类别 2

名字3

我试过寻找答案，但没有任何效果。

我尝试做这样的事情，但它不起作用：

 render() {
    var innerArray = this.state.newArray.map((values) => {
      return {this.state.newArray.value[values].map((name, index) => {
        return (
          <div key={`value_${name}`}>{name.Name}</div>
        )
      })}
    })
    var nestedArray = this.state.newArray.map((title, index) => {
      return(
        <div key={`nestedArray_${index}`}>
          <div key={`category_${title}`}>{title.Category}</div>
          {innerArray}
        </div>
      )
    })

    return (
      <div>
        <h1>{nestedArray}</h1>
      </div>
    );
  }

Javascript 和 React 新手，感谢您的帮助。

【问题讨论】：

标签： javascript arrays reactjs nested mapping

【解决方案1】：

您还想在每个title 对象中的每个value 数组上使用map 以呈现所有Name 属性。

示例

class App extends React.Component {
  state = {
    newArray: [
      {
        Category: "Category1",
        value: [
          {
            Name: "Name1"
          },
          {
            Name: "Name2"
          },
          {
            Name: "Name4"
          }
        ]
      },
      {
        Category: "Category2",
        value: [
          {
            Name: "Name3"
          }
        ]
      }
    ]
  };

  render() {
    var nestedArray = this.state.newArray.map((title, index) => {
      return (
        <div key={index}>
          <h1>{title.Category}</h1>
          {title.value.map((val, index) => (
            <div key={index}>{val.Name}</div>
          ))}
        </div>
      );
    });

    return (
      <div>
        {nestedArray}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

【讨论】：

【解决方案2】：

@Tholle 的答案有效。我只想补充一点，不要将您的组件命名为Array。它会抛出错误，认为您正在修改 JavaScript 的内置 Array 对象。

这就是为什么在您的 codepen 示例中，即使您映射到嵌套的 value，它也会引发 TypeError: Class constructor Array cannot be invoked without 'new' 错误。

【讨论】：

感谢您的评论。我并没有真正命名组件数组。它只是作为一个占位符。