如何在 React.js 中的值（对象元素）下打印嵌套数组答案

【问题标题】：How I can print nested array under value (object element) in React.js如何在 React.js 中的值（对象元素）下打印嵌套数组
【发布时间】：2022-09-22 21:23:38
【问题描述】：

我正在尝试在 state.list 的对象元素（值）下打印一个嵌套数组（子列表）。我尝试了但没有得到我想要的预期结果。我制作了两个名为 Orderlist 和 Item 的组件，它们包含嵌套数组和值元素。我找不到我做错的地方。对不起！我正处于学习阶段，正在做一个超级小项目。每一个帮助将不胜感激。

import React from \"react\";
import \"./styles.css\";
const Item = (props) => {
  return props.list.map((item)=><li>{item.sublist}</li>);
};
const Orderlist = (props) => {
  return props.list.map((element) => (
    <ol>
      {element.value}
      <Item list = {props.list} />
    </ol>
  ));
};

class App extends React.Component {
  state = {
    list: [
      { value: \"Fruit\", sublist: [\"Banana\", \"Apple\", \"Graps\"] },
      { value: \"Vegetable\", sublist: [\"Carrat\", \"Potato\", \"Mushroom\"] },
      { value: \"Sports\", sublist: [\"Cricket\", \"Badminton\", \"Football\"] },
      { value: \"Continent\", sublist: [\"Asia\", \"Europe\", \"Africa\"] }
    ]
  };
  render() {
    return <Orderlist list={this.state.list} />;
  }
}
export default App;

结果得到了…………

Fruit

BananaAppleGraps
CarratPotatoMushroom
CricketBadmintonFootball
AsiaEuropeAfrica

Vegetable

BananaAppleGraps
CarratPotatoMushroom
CricketBadmintonFootball
AsiaEuropeAfrica

Sports
BananaAppleGraps
CarratPotatoMushroom
CricketBadmintonFootball
AsiaEuropeAfrica

Continent
BananaAppleGraps
CarratPotatoMushroom
CricketBadmintonFootball
AsiaEuropeAfrica

标签： reactjs

【解决方案1】：

有两个错误：

更改：

<Item list = {props.list} />

至

<Item list={element.sublist} />

更改：

<li>{item.sublist}</li>

至

<li>{item}</li>

const Item = (props) => {
  return props.list.map((item, index) => <li key={index}>{item}</li>);
};
const Orderlist = (props) => {
  return props.list.map((element, idx) => (
    <ol key={idx}>
      {element.value}
      <Item list={element.sublist} />
    </ol>
  ));
};

class App extends React.Component {
  state = {
    list: [
      { value: "Fruit", sublist: ["Banana", "Apple", "Graps"] },
      { value: "Vegetable", sublist: ["Carrat", "Potato", "Mushroom"] },
      { value: "Sports", sublist: ["Cricket", "Badminton", "Football"] },
      { value: "Continent", sublist: ["Asia", "Europe", "Africa"] }
    ]
  };
  render() {
    return <Orderlist list={this.state.list} />;
  }
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

【讨论】：