javascript - .map 配列を表示する React と Contentful

Question

以前の開発者によって作成された Contentful ダッシュボードからアイテムの配列を作成するためのファイルを模倣しました。コンテンツをページに挿入し、graphQL セクションに追加して、何らかのデータを確実に取り込むようにしました。しかし、配列をマップしようとすると、次の図のようにエラーがスローされます。

関数 createFibreFromTypeAndPropsのエラー

要素の型が無効です: 文字列 (組み込みコンポーネントの場合) またはクラス/関数 (複合コンポーネントの場合) が必要ですが、 を取得しobjectました。のレンダリング方法を確認してください ValueList。

私がオンラインで見たいくつかのことはexport default、中括弧で関数をエクスポートするのではなく、メソッドを介してコンポーネントをインポートすることについて言及しており、どちらの方法でも同じ結果が得られます。私が作成したコードは以下のとおりです。

import React from 'react';
import slugify from 'slugify'
import styled from 'styled-components'
import Reveal from 'react-awesome-reveal'

import { BREAKPOINTS, ANIMATION, customReveal } from '../styles/cssVariables'
import Container from './layout/container'

const ValuesStyles = {
  backgroundColor: 'black',
  textAlign: 'center',
  overflow: 'hidden'
}

const ValueItem = {
    backgroundColor: 'white',
    color: 'black'
}

const ValueList = (props) => {

return (
    <Container width={14}>
        {props.title}
        {props.valuesList.map((value, i) => (
            <ValueItem style={ValueItem} key={i}>{value}</ValueItem>
        ))}
    </Container>
  )
}

export default ValueList

コンポーネント自体が小道具を渡すことをテストしたが、配列をマップしようとするたびにレンダリングエラーがスローされることをテストしたので、何かを見逃したことがありますか? 以下は、コンテナー ページに追加されたコードです。

const valueList = get(this, 'props.data.contentfulPageContentStudio.valueList')


<ValueList title="Test Value List" valuesList={valueList}/>