Graph Client - 将字符串数组映射到 React Issue 中的列表答案

【问题标题】：Graph Client - Mapping String Array to List in React IssueGraph Client - 将字符串数组映射到 React Issue 中的列表
【发布时间】：2023-01-25 13:34:42
【问题描述】：

我正在使用 Graph Client 返回一个文本数组并映射到一个列表。问题是列表将它们全部集中到一个段落中，而不是将每个分解为一个列表项。如果我从本地数组中提取数据，这将正常工作。我尝试索引地图无济于事。有任何想法吗？

来自 GraphCMS 查询的数组。

“列表项”：[ “项目 1”， “项目 2”， “项目 3” ]

我如何映射：

{pages.listsection.map((val) => {
    return (
        <div>
            <ul>
            <li>{val.listItems}</li>
            </ul>
        </div>
);

提前致谢！

【问题讨论】：

标签： reactjs graphql

【解决方案1】：

您的标记/映射似乎不正确，您应该将“div”和“ul”等静态部分放在循环之外，如下所示：

<div>
  <ul>
    {pages.listsection.map((val) =>
      <li>{val.listItems}</li>
    )}
  </ul>
</div>

【讨论】：