React中使用Graph Client映射字符串数组为列表的问题

问题出在你只对外层的pages.listsection做了映射，但每个val中的listItems本身是一个数组，直接在<li>里渲染数组会被浏览器自动转为逗号分隔的字符串，导致所有项合并成一段。

修正后的代码如下：

{pages.listsection.map((val, sectionIndex) => {
    return (
        <div key={sectionIndex}>
            <ul>
                {/* 对listItems数组单独做映射，生成每个列表项 */}
                {val.listItems.map((item, itemIndex) => (
                    <li key={itemIndex}>{item}</li>
                ))}
            </ul>
        </div>
    );
})}

关键说明： #

• 外层pages.listsection.map负责遍历每个区块（假设listsection是包含多个列表区块的数组）
• 内层val.listItems.map才是遍历具体的列表项，为每个项生成独立的<li>元素
• 添加key属性是React的必填规范，用来帮助React识别元素变化，避免渲染警告。如果列表项有唯一ID，优先用ID作为key；没有的话用索引也能解决当前问题

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