React访问WordPress GraphQL嵌套数组yarnFiber返回undefined求助

我是React新手，正在开发一款使用GraphQL和Apollo从WordPress获取数据的应用，目前卡在嵌套数组值访问问题上。我可以通过{yarn?.yarnFields?.yarnPrice}语法获取其他字段值，但访问yarnFiber的name字段时返回undefined，且yarnFiber数组可能包含多个值，需要正确获取并展示。

控制台打印的数据结构 #

{__typename: 'Yarn', name: 'Brick Red', yarnFields: {…}}
name: "Brick Red"
yarnFields:
yarnColor: "#cb4154"
yarnFiber: Array(1)
0: {__typename: 'Fiber', name: 'Merino'}
length: 1
[[Prototype]]: Array(0)
yarnPrice: 6.5
__typename: "Yarn_Yarnfields"
[[Prototype]]: Object
__typename: "Yarn"
[[Prototype]]: Object

GraphQL返回的数据结构 #

{
  "data": {
    "yarns": {
      "nodes": [
        {
          "name": "Brick Red",
          "id": "dGVybToyNTI=",
          "yarnFields": {
            "yarnColor": "#cb4154",
            "yarnPrice": 6.5,
            "yarnFiber": [
              {
                "name": "Merino"
              }
            ]
          }
        },
        {
          "name": "Burgundy",
          "id": "dGVybToyNzg=",
          "yarnFields": {
            "yarnColor": "#662d40",
            "yarnPrice": 9.11,
            "yarnFiber": null
          }
        },
        {
          "name": "Cobalt Blue",
          "id": "dGVybToyOTQ=",
          "yarnFields": {
            "yarnColor": "#1664af",
            "yarnPrice": 7.54,
            "yarnFiber": null
          }
        }
      ]
    }
  }
}

当前代码 #

JSX遍历代码 #

const { loading, error, data } = useQuery(YARNS_QUERY);
if (isEmpty(data)) {
  return null;
}

if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;

return (
  <>
    {data.yarns.nodes.map((yarn, i) => (
      <DK key={i} yarn={yarn}/>
    ))} 
  </>
);

展示组件代码 #

return (
  <div>
    <div onClick={change} 
        data-color={yarn?.name}
        data-price={yarn?.yarnFields?.yarnPrice}
        data-fiber={yarn?.yarnFields?.yarnFiber?.name}
        style={{
            background: yarn?.yarnFields?.yarnColor, 
            width: '50px', 
            height: '50px', 
            borderRadius: '50%'}}>
      fiber: {yarn.yarnFields?.yarnFiber?.name} // 返回空值
    </div>
  </div>
);

补充说明 #

yarnFiber数组可能包含多个值，示例：

{
  "name": "Burgundy",
  "id": "dGVybToyNzg=",
  "yarnFields": {
    "yarnColor": "#662d40",
    "yarnPrice": 9.11,
    "yarnFiber": [
      {
        "name": "Merino Wool"
      },
      {
        "name": "Silk"
      },
      {
        "name": "Cashmere"
      }
    ]
  }
}

解决方案 #

问题核心是yarnFiber是数组类型，不是单个对象，所以不能直接用.name访问。以下是几种处理方式：

1. 展示所有纤维名称（逗号分隔） #

如果需要把所有纤维名称用逗号拼接展示：

// 提取纤维名称列表，处理null/空数组情况
const fiberNames = yarn?.yarnFields?.yarnFiber?.map(fiber => fiber.name) || [];
// 转成字符串，空数组时显示默认文本
const fiberText = fiberNames.length > 0 ? fiberNames.join(', ') : '无纤维信息';

替换展示组件中的对应代码：

<div onClick={change} 
     data-color={yarn?.name}
     data-price={yarn?.yarnFields?.yarnPrice}
     data-fiber={fiberText}
     style={{
         background: yarn?.yarnFields?.yarnColor, 
         width: '50px', 
         height: '50px', 
         borderRadius: '50%'}}>
  fiber: {fiberText}
</div>

2. 只展示第一个纤维名称 #

如果只需要显示数组中的第一个纤维名称：

const firstFiberName = yarn?.yarnFields?.yarnFiber?.[0]?.name || '无纤维信息';

替换对应位置代码：

<div onClick={change} 
     data-color={yarn?.name}
     data-price={yarn?.yarnFields?.yarnPrice}
     data-fiber={firstFiberName}
     style={{
         background: yarn?.yarnFields?.yarnColor, 
         width: '50px', 
         height: '50px', 
         borderRadius: '50%'}}>
  fiber: {firstFiberName}
</div>

3. 单独渲染每个纤维名称 #

如果需要把每个纤维名称作为独立元素展示：

<div onClick={change} 
     data-color={yarn?.name}
     data-price={yarn?.yarnFields?.yarnPrice}
     style={{
         background: yarn?.yarnFields?.yarnColor, 
         width: '50px', 
         height: '50px', 
         borderRadius: '50%'}}>
  <div>fiber:</div>
  {yarn?.yarnFields?.yarnFiber?.map((fiber, index) => (
    <span key={index}>{fiber.name}</span>
  )) || <span>无纤维信息</span>}
</div>

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