如何在React.js中打印value(object元素)下的嵌套数组

Question

我正试图从state.list在object元素(value(下打印一个嵌套数组(子列表(。我尝试过，但没有得到我想要的结果。我制作了两个名为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

Answer 1

有两个错误：

1. 您需要将element.sublist作为list道具传递给Item，而不是props.list：

<Item list={element.sublist} />

2. 列表项应仅为item而不是item.sublist：

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

Answer 2

https://codesandbox.io/s/dazzling-golick-0ie3qy?file=/src/App.js

{list.map((item, index) => (
<>
<li>{item.value}</li>
{item?.sublist?.map((subitem, index) => (
<>
<li>{subitem}</li>
</>
))}
</>
))}

Answer 3

试试这个：

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