使用 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>
))}

how do I pass the value.singularValue as a prop to another component with this same method, do I just wrap the component in the same operators?

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

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

并且该值将低于 props.singleItem

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

Accessing an array within an array using React, Gatsby and GraphQL

reactjs

contentful

graphql

gatsby