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

理想情况下，我希望它是

类别1

名称1

Name2

Name4

类别2

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

您还希望在每个map对象的每个value数组上使用title来呈现所有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'错误。

嵌套数组图

2 个答案: