Javascript Reactjs中的不变冲突

我正在react中处理图形，遇到了以下错误

不变冲突：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查

应用程序的渲染方法

我的代码：

import React from 'react';
import {BarChart} from 'chart-race-react';
import './App.css';

const data = ['apple', 'banana', 'orange'].reduce((res, item) => ({...res, ...{[item]: Array(20).fill(0).map(_ => Math.floor(20 * Math.random()))}}), {});

console.log(data)

const randomColor = () => {
  return `rgb(${255 * Math.random()}, ${255 * Math.random()}, ${255})`;
}

const len = data[Object.keys(data)[0]].length;
const keys = Object.keys(data);
const colors = keys.reduce((res, item) => ({ 
    ...res, 
    ...{ [item]: randomColor() } 
}), {});

const labels = keys.reduce((res, item, idx) => {
  return{
   ...res, 
   ...{[item]: (
<div style={{textAlign:"center",}}>
  <div>{item}</div>
</div>
   )}
}}, {});

console.log(labels)

const time = Array(20).fill(0).map((itm, idx) => idx + 1);

class App extends React.Component {
  render(){
    return (
     <div style={{width: "500px"}}>
      <BarChart
        start={true}
        data={data} 
        timeline={time}
        labels={labels}
        colors={colors}
        len={len}
        timeout={400}
        delay={100}
        timelineStyle={{
          textAlign: "center",
          fontSize: "50px",
          color: "rgb(148, 148, 148)",
          marginBottom: "100px"
        }}
        textBoxStyle={{
          textAlign: "right",
          color: "rgb(133, 131, 131)",
          fontSize: "30px",
        }}
        barStyle={{
          height: "60px",
          marginTop: "10px",
          borderRadius: "10px",
        }}
        width={[15, 75, 10]}
        maxItems={10}
      />

    </div>
    );
  }
}
export default App;

从“React”导入React；
从“chart race react”导入{BarChart}；
导入“/App.css”；
const data=['apple'，'banana'，'orange'].reduce（（res，item）=>（{…res，{[item]：数组（20）.fill（0）.map（{=>Math.floor（20*Math.random（））}），{}）；
console.log（数据）
常量随机颜色=（）=>{
返回`rgb（${255*Math.random（）}，${255*Math.random（）}，${255}）`；
}
const len=data[Object.keys（data）[0]].length；
常量键=对象键（数据）；
const colors=keys.reduce（（res，item）=>（{
…res，
…{[item]：randomColor（）}
}), {});
const labels=keys.reduce（（res，item，idx）=>{
返回{
…res，
…{[项目]：(
{item}
)}
}}, {});
console.log（标签）
常量时间=数组（20）.填充（0）.映射（（itm，idx）=>idx+1）；
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
导出默认应用程序；
您可能需要将导入更改为：

import BarChart from 'chart-race-react';

条形图使用导出默认值

无仍获取元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但获取：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。请检查

Bar

的渲染方法。