Javascript React和React-chartjs-2，折线图不显示API中的数据

我正在尝试使用react-chartjs-2呈现折线图。现在，当我将静态道具传递到线条组件时，它可以正常工作。但是，当我从API获取数据时，将其设置为变量，然后将该变量作为prop传递。“我的线”组件未使用新数据重新渲染

我正在记录传递到Line组件中的道具，我可以看到它首先以null的形式到达，然后我从API接收到良好的数据。所以看起来线条组件在收到道具后没有重新渲染？我可能做错了。请帮忙

import React from "react";
import { Line } from "react-chartjs-2";

export default class ExpenseChart extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            marketData: [100, 200, 300],
            chartData: {
                labels: this.props.monthNames,
                datasets: [
                    {
                        backgroundColor: "rgba(142, 243, 197, 0.5)",
                        pointBackgroundColor: "#fff",
                        pointHoverBackgroundColor: '#fff',
                        pointStyle: "circle",
                        label: "Monthly Expenses",
                        borderColor: "#2be1d8",
                        borderWidth: 3,
                        borderJoinStyle: "round",
                        lineTension: 0.3,
                        fontColor: "#fff",
                        hitRadius: 5,
                        hoverRadius: 8,
                        radius: 4,
                        data: this.props.monthExpenses
                    },
                ],
            },
        };
    }

    render() {
        console.log("why no names", this.props.monthNames)
        return (
            <div className="expenseChart">
                <h2 className="expenseChart__name">{this.props.graphname}</h2>
                 <Line
                    data={this.state.chartData}
                    options={{
                        maintainAspectRatio: false,
                        responsive: true,
                        aspectRatio: 3,
                        scales: {
                            yAxes: [
                                {
                                    ticks: {
                                        display: false,
                                    },
                                },
                            ],
                        },
                        layout: {
                            padding: {
                                right: 10,
                            },
                        },
                    }}
                />
            </div>
        );
    }
}

从“React”导入React；
从“react-chartjs-2”导入{Line}；
导出默认类别ExpenseChart扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
市场数据：[100200300]，
图表数据：{
标签：this.props.monthNames，
数据集：[
{
背景色：“rgba（142243197,0.5）”，
pointBackgroundColor:#fff“，
pointHoverBackgroundColor:“#fff”，
点样式：“圆”，
标签：“每月费用”，
边框颜色：“2be1d8”，
边框宽度：3，
边框样式：“圆形”，
线张力：0.3，
fontColor:#fff“，
半径：5，
悬停半径：8，
半径：4，
数据：this.props.monthExpenses
},
],
},
};
}
render（）{
log（“为什么没有名字”，this.props.monthNames）
返回(
{this.props.graphname}
);
}
}

然后父组件连接到redux存储，它看起来如下所示：

import React from "react";
import { connect } from 'react-redux';
import ExpenseChart from "../elements/ExpenseChart";
import { fetchExpenses } from '../../actions/index';

class Dashboard extends React.Component {

    componentDidMount() {
        this.props.dispatch(fetchExpenses());
    }

    render() {
        let labels = this.props.months && this.props.months;

        return (
            <main className="dashboard">
                <ExpenseChart
                    monthNames={labels}
                    monthExpenses={["123", "123", "12312", "12341", "231231", "1231", "1231"]}
                    // I am receiving monthExpenses props into the ExpenseChart component
                    // but not monthNames
                />
            </main>
        );
    }
}

const mapStateToProps = state => ({
    auth: state.app.auth,
    months: state.app.months,
});

export default connect(mapStateToProps)(Dashboard);

从“React”导入React；
从'react redux'导入{connect}；
从“./要素/ExpenseChart”导入ExpenseChart；
从“../../actions/index”导入{fetchExpenses}；
类Dashboard扩展了React.Component{
componentDidMount（）{
this.props.dispatch（fetchExpenses（））；
}
render（）{
让标签=this.props.months&&this.props.months；
返回(
);
}
}
常量mapStateToProps=状态=>({
auth:state.app.auth，
月份：state.app.months，
});
导出默认连接（MapStateTops）（仪表板）；

---

我以前也做过类似的事情，从API获取数据并将其作为道具传递给Line组件。但唯一的区别是我在这里使用redux。显然，这次行组件没有收到好的数据。

问题可能出在这个

componentDidMount

code上

componentDidMount() {
        this.props.dispatch(fetchExpenses());
    }

根据上的文件

动作（对象†）：一个简单的对象，描述所做的更改 对您的应用程序有意义。操作是将数据导入的唯一方法 存储，因此任何数据，无论是来自UI事件、网络回调、， 或者最终需要调度WebSocket等其他源 作为行动。操作必须具有指示操作类型的类型字段 正在执行的操作。类型可以定义为常量并导入 来自另一个模块。使用字符串作为类型比使用符号更好 因为字符串是可序列化的。除类型外，一个 行动目标真的取决于你。如果你感兴趣，请退房 Flux标准行动，就如何实施行动提出建议 建造的

这里

fetchExpenses

可能会返回一个承诺，在这种情况下，您可能需要

fetchExpenses().then(apiRes => dipatch({type: "ACTION_TYPE": payload: apiRes}))

---

另一种方法是使用

问题可能出在这个

组件didmount

代码上

componentDidMount() {
        this.props.dispatch(fetchExpenses());
    }

根据上的文件

动作（对象†）：一个简单的对象，描述所做的更改 对您的应用程序有意义。操作是将数据导入的唯一方法 存储，因此任何数据，无论是来自UI事件、网络回调、， 或者最终需要调度WebSocket等其他源 作为行动。操作必须具有指示操作类型的类型字段 正在执行的操作。类型可以定义为常量并导入 来自另一个模块。使用字符串作为类型比使用符号更好 因为字符串是可序列化的。除类型外，一个 行动目标真的取决于你。如果你感兴趣，请退房 Flux标准行动，就如何实施行动提出建议 建造的

这里

fetchExpenses

可能会返回一个承诺，在这种情况下，您可能需要

fetchExpenses().then(apiRes => dipatch({type: "ACTION_TYPE": payload: apiRes}))

---

另一种方法是使用

好，我只是通过检查我接收的数据在作为道具传递之前是否为空来解决这个问题。这就是我认为这行应该做的

let labels=this.props.months&&this.props.months

<main className="dashboard">
    { this.props.months != null ? <ExpenseChart monthNames={labels}/> : ''; }
</main>


{this.props.months！=null？：''；}
好的，我只是通过检查我接收的数据在作为道具传递之前是否为空来解决这个问题。这就是我认为这行应该做的
let labels=this.props.months&&this.props.months

<main className="dashboard">
    { this.props.months != null ? <ExpenseChart monthNames={labels}/> : ''; }
</main>


{this.props.months！=null？：''；}
您是否在n/w选项卡中获得API响应？我没有使用此库，但许多图表期望父级和/或其本身具有高度和宽度，请检查它是否可能是一个problem@nithin是的，我正在获取API响应和数据。它只是不会更新我的chartjs线条组件。您是否在n/w选项卡中获得API响应？我没有使用此库，但许多图表期望父级和/或其本身具有高度和宽度，请检查它是否可能是problem@nithin是的，我正在获取API响应和数据。它只是不会更新我的chartjs行组件。我正在使用redux thunk进行异步操作