1

我已经模仿了一个文件，用于从以前的开发人员构建的 Contentful 仪表板创建一组项目，我已将内容插入页面并将它们添加到 graphQL 部分以确保它正在提取某种数据但是当我尝试映射数组时，它会抛出一个错误，如下图所示：

函数 createFiberFromTypeAndProps中的错误

元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到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}/>
4

0 回答 0