Reactjs 中的不变违规

Question

我正在处理 react 中的图表，但遇到了以下错误。

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

检查App的渲染方法。

我的代码：

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;

Answer 1

您可能需要将导入更改为：

import BarChart from 'chart-race-react';

条形图使用export default