Javascript 在react中构建人口图表时输出错误

我是个新手，我正在尝试使用Axios从API获取人口数据，并显示世界人口的变化。像这样的

我正在尝试使用。存储库中只有一个示例，因此我尝试从该示例中得到一个提示

我试过：

import React, { Component } from 'react';
import BarChart from 'chart-race-react';

import axios from 'axios';
import './App.css';
const API_URL = 'https://example.json';

class App extends Component {
  state = {
    countries: []
  }

componentDidMount() {
axios.get(API_URL)
.then(response => response.data)
.then((data) => {
  this.setState({ countries: data })
  console.log(this.state.countries)
 })
}

  render() {

    return (
      <div style={{width: "500px"}}>
        <BarChart 

    start={true}
    data = {this.state.countries}
    len = {this.state.countries.length}
    timeout={400}
    delay={100}
    colors = "rgb(133, 131, 131)"
    timeline = {Array(20).fill(0).map((itm, idx) => idx + 1)}
    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 = {this.state.countries.length}

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

---

我得到一个输出，其中一个数字出现在浏览器中，从1到20。如何使我的应用程序看起来与上面的gif完全相同？我在这里做错了什么？

没有属性颜色。文档中提到了作为对象的属性颜色。在您的情况下，colors对象将具有表示国家的键，就像在您的数据中一样，并具有表示颜色的值

1。您不能只发布一行多行错误并希望得到帮助。请发布整个堆栈跟踪。2.显然，无论代码来自何处，它都不会出现在您发布的代码中，因为您甚至没有提到可变颜色。这让我回到了完整的堆栈跟踪和所有相关的代码，如果我不清楚，我很抱歉。所以基本上我用的是这个软件包。请访问，看看你是否能帮上好的选择。NPM包看起来不错，但是您仍然需要发布完整的堆栈跟踪。简单_this.props.colors未定义是不够的。您仍然无法从中分辨出是哪一行代码导致了错误，如果错误是由库引发的，那么在错误发生之前，最后一次触发的代码是哪一行。堆栈跟踪包含此类详细信息，我假设它存在于您的日志中。。。或者是_this.props.colors未定义整个错误，控制台日志中几乎没有其他内容？我已经添加了错误谢谢，但我的输出仍然不太好。。。这是另一个问题。让我们一次解决一个问题，因为每个问题都可能是下一个问题的原因。那么，在修复“颜色”属性后，是否仍然存在颜色问题？你在日志中看到其他错误了吗？没有错误，我得到的输出数字是1->20。你真的需要学习更具体一些。一个你甚至看不到的白色字符有时可能会带来不同。不要描述你的输出。复制粘贴它。首先，我可以看出你的len可能是错的。您的数据应该是一个具有数组的对象，每个数组的长度都等于“len”。所以如果len是2，那么数据应该是{UK:[1,2]}。如果这是您的数据的实际外观，那么您的len={this.state.countries.length}当前未定义。此外，您的时间线长度必须为len。我通常会建议您再次查看文档，检查所有属性以及传递给它们的实际值，因为很明显，它们中的许多都是乱七八糟的