嵌套数组映射

Question

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

NAME4

产品组别

NAME3

我试过寻找答案，但没有真正有效。

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

 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的新手，所以我很感激帮助。

Answer 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> 

Answer 2

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

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