React新手求助：如何将嵌套JSON数据渲染为分行列表

嘿，我来帮你搞定这个渲染问题！你现在遇到的核心问题是：把所有设备信息拼接成了一个单一字符串，React自然会把它当成一段连续文本渲染，所以所有内容挤在了一行里。我们只需要调整组件的渲染逻辑，为每个设备生成独立的元素就能实现分行效果。

问题根源分析 #

你原来的ListItemFestData组件里，通过循环把所有设备的deviceID和qty拼接成了一个字符串rendertext，最后只返回一个包含这个字符串的<ul>，没有为每个设备创建单独的列表项，所以所有内容都挤在一起了。

修改方案 #

我们直接利用React的列表渲染能力，为每个设备生成独立的<li>，同时去掉不必要的JSON转义操作（完全不需要把数组转成字符串再解析回来）：

import React from "react";

function ListItemFest(props) {
  return (
    <div>
      <h3>{props.value}</h3> {/* 用h3更符合标题语义，也能自动换行 */}
    </div>
  );
}

function ListItemFestData(props) {
  // 直接接收设备数组，不用JSON转义
  const devices = props.devices;
  // 用map遍历数组，为每个设备生成独立的li
  const deviceItems = devices.map(device => (
    <li key={device.deviceID}>
      deviceID : {device.deviceID}, qty : {device.qty}
    </li>
  ));
  
  return (
    <ul>
      {deviceItems}
    </ul>
  );
}

function FestivalsList(props) {
  const festivals = props.festivals;
  const listItems = festivals.map(festival => (
    <div key={festival.festivalName} style={{ marginBottom: '16px' }}> {/* 给每个节日块加间距，更美观 */}
      <ListItemFest value={festival.festivalName} />
      {/* 直接传递festival.cuves数组，不用转成字符串 */}
      <ListItemFestData devices={festival.cuves} />
    </div>
  ));
  return <div>{listItems}</div>;
}

const festivals = [
  { festivalName: "XXX", cuves: [{ deviceID: "001", qty: "100" }, { deviceID: "002", qty: "700" }] },
  { festivalName: "YYY", cuves: [ { deviceID: "003", qty: "666" }, { deviceID: "004", qty: "400" }, { deviceID: "005", qty: "555" } ] }
];

export default function App() {
  return (
    <div style={{ padding: '20px' }}>
      <FestivalsList festivals={festivals} />
    </div>
  );
}

关键修改点说明 #

1. 去掉JSON转义：直接把festival.cuves数组作为props传给ListItemFestData，避免了不必要的字符串解析，代码更简洁高效。
2. 用map渲染列表项：在ListItemFestData里，通过map遍历设备数组，为每个设备生成一个独立的<li>，这样每个设备信息就会自动分行显示。
3. 优化语义和样式：把原来的<li>标题改成<h3>，更符合标题语义；给每个节日块加了底部间距，让视觉效果更清晰。

这样修改后，就能完全实现你期望的分行渲染效果啦！

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