React.js中如何在对象元素的value下打印嵌套数组？

你的代码存在两个核心问题，导致输出不符合预期：

• 传递给Item组件的是完整的父列表，而非当前分类对应的子列表，所以每个分类下都重复渲染了所有子列表
• 直接渲染子列表数组时，React会自动拼接数组元素为字符串，无法生成独立的列表项

修复后的代码 #

import React from "react";
import "./styles.css";

// 渲染单个分类下的子列表项
const Item = (props) => {
  return props.sublist.map((item, index) => <li key={index}>{item}</li>);
};

// 渲染每个分类及其对应的子列表
const Orderlist = (props) => {
  return props.list.map((element, index) => (
    <ol key={index}>
      <strong>{element.value}</strong>
      {/* 仅传递当前分类的子列表给Item组件 */}
      <Item sublist={element.sublist} />
    </ol>
  ));
};

class App extends React.Component {
  state = {
    list: [
      { value: "水果", sublist: ["香蕉", "苹果", "葡萄"] },
      { value: "蔬菜", sublist: ["胡萝卜", "土豆", "蘑菇"] },
      { value: "运动", sublist: ["板球", "羽毛球", "足球"] },
      { value: "大洲", sublist: ["亚洲", "欧洲", "非洲"] }
    ]
  };
  render() {
    return <Orderlist list={this.state.list} />;
  }
}

export default App;

关键修改说明 #

1. 修正列表传递逻辑：在Orderlist中，将原本传递的props.list改为element.sublist，确保每个分类只渲染自身对应的子列表
2. 子列表渲染优化：Item组件遍历传入的子列表数组，为每个元素生成独立的<li>标签；同时给所有列表元素添加key属性，符合React列表渲染的规范
3. 额外将数据中的英文内容转为中文，便于直观查看层级效果

修复后输出效果 #

1. 水果
   1. 香蕉
   2. 苹果
   3. 葡萄
2. 蔬菜
   1. 胡萝卜
   2. 土豆
   3. 蘑菇
3. 运动
   1. 板球
   2. 羽毛球
   3. 足球
4. 大洲
   1. 亚洲
   2. 欧洲
   3. 非洲

内容的提问来源于stack exchange，提问作者Sandeep Kumar