使用 React、Gatsby 和 GraphQL 访问数组中的数组

Question

使用 Contentful CMS，我创建了一个内容模型，该模型允许在一系列项目中包含多个项目。部分GraphQL查询如下：

   valueContainers {
    id
    title
    description
    singularValue {
      id
      subValueTitle
      subValueContent {
        subValueContent
      }
    }
  }

我能够显示顶级部分 (valueContainers) 的标题，但我试图在其中映射奇异值内部数组，但我很难通过数据。我映射下面数组的代码如下：

    return (
    <ValuesWrapper>
        {props.valueList.map((value) => (
            <ValueContainer>
                <ValueTitle key={value.id}>{value.title}</ValueTitle>
                <ValuesDescription>{value.description}</ValuesDescription>
                {value.singularValue.map((item) => (
                    <SingleItem key={item.id}>{item.subValueTitle}</SingleItem>
                ))}
            </ValueContainer>
        ))}
    </ValuesWrapper>
)

我在前端收到一条错误消息：

Error in function eval

Cannot read properties of null (reading 'map')

Answer 1

您的方法看起来不错，但我的猜测是并非所有valueContainers 都具有或包含singularValue（或者换句话说，在某些元素中是null）。试试：

return (
<ValuesWrapper>
    {props.valueList.map((value) => (
        <ValueContainer>
            <ValueTitle key={value.id}>{value.title}</ValueTitle>
            <ValuesDescription>{value.description}</ValuesDescription>
            {value.singularValue && value.singularValue.map((item) => (
                <SingleItem key={item.id}>{item.subValueTitle}</SingleItem>
            ))}
        </ValueContainer>
    ))}
    </ValuesWrapper>
)

或者使用可选的链式操作符：

{value?.singularValue?.map((item) => (
    <SingleItem key={item.id}>{item.subValueTitle}</SingleItem>
))}

如何将value.singularValue 作为道具传递给另一个组件 用同样的方法，我只是把组件包装在同一个 运营商？

如果您将组件包装为children，但如果您想将值作为props 传递，只需使用：

{value?.singularValue?.map((item) => <SingleItem key={item.id} singleItem={item} />)}

并且该值将低于props.singleItem