Reactjs React组件未在setState上重新渲染

tldr；版本：父级在调用setState后不重新呈现…

我有一个显示多个组件的仪表板视图。加载数据的子组件工作正常。但我在仪表板的另一部分计划使用同一数据集加载同一组件的多个版本。因此，我不是对同一个数据集进行6次api调用，而是通过父数据集将数据拉入并向下发送给子数据集。我还使用路线参数来指示要查找的公司

包含自己的api调用的组件工作得很好，与路由参数配合使用也很好。这是我在父级中进行api调用的组件，我遇到了问题。父级渲染，然后是子级渲染，然后api调用完成并设置状态，但不重新加载。因此，随着route参数的更改，组件将显示上一次单击的数据（基本上总是落后一次）

我已经尝试更改要将其绑定到的react事件，我使用了映射函数，确保“this”就是我想要的“this”。。。没有骰子。我知道它正在正确地更新状态，如果我使用forceUpdate（），组件中会显示正确的数据（但我不能这样做，这将迫使我将forceUpdate（）添加到react update方法中，这将导致它不断重新加载）

有什么想法吗？？下面是一些精简/模糊的代码：

家长

...
class ClientDash extends Component {
    constructor(props) {
        super(props);
        this.state = { chartOptions: {}, data1: {}, data2: {}, data3: {}, data4: {}, data5: {}, data6: {}, loaded: false };
    }

    loadData(clientID) {
        var currYear = moment().year();
        var chartData = {
            labels: [(currYear-4).toString(), (currYear-3).toString(), (currYear-2).toString(), (currYear-1).toString(), currYear.toString()],
            datasets: [{
                type: 'bar',
                label: 'Cat1',
                backgroundColor: this.props.colors[0].borderColor,
                borderColor: 'white',
                borderWidth: 3,
                data: [null, null, null, null, null]
            }, {
                type: 'bar',
                label: 'Cat2',
                backgroundColor: this.props.colors[1].borderColor,
                borderColor: 'white',
                borderWidth: 3,
                data: [null, null, null, null, null]
            }, {
                type: 'bar',
                label: 'Cat3',
                backgroundColor: this.props.colors[2].borderColor,
                borderColor: 'white',
                borderWidth: 3,
                data: [null, null, null, null, null]
            }, {
                type: 'bar',
                label: 'Cat4',
                backgroundColor: this.props.colors[3].borderColor,
                borderColor: 'white',
                borderWidth: 3,
                data: [null, null, null, null, null]
            }]
        };

        var chartOptions = {
            tooltips: {
                mode: 'index',
                intersect: true
            },
            responsive: true
        };

        
        axios(apiCall)
            .then(d => {
                var data = d.data;
                var data1 = _.clone(chartData),
                    data2 = _.clone(chartData),
                    data3 = _.clone(chartData),
                    data4 = _.clone(chartData),
                    data5 = _.clone(chartData),
                    data6 = _.clone(chartData);

                
                /* some data manipulation */

                console.log('loading data');
                console.log(this);
                this.setState({ chartOptions: chartOptions, data1: data1, data2: data2, data3: data3, data4: data4, data5: data5, data6: data6, loaded: true });
                // this.forceUpdate();
            }).then()
            .catch(function (error) {
                console.log(error);
            })
    }

    componentWillUpdate(nextProps) {
        this.initComp(nextProps.params.clientID);
    }

    shouldComponentUpdate(nextProps) {
        return nextProps.params.clientID != this.props.params.clientID;
    }

    componentWillMount() {
        this.initComp(this.props.params.clientID);
    }

    render() {
        console.log('parent rendering')
// removed all unnecessary code below
        return (
            <div className="wrapper wrapper-content animated fadeIn">
                <div className="row">
                    <div className="col-lg-4">
                        <div className="ibox">
                            <div className="ibox-content">
                                <MetricsColumnChart metricsData={this.state.data1} options={this.state.chartOptions} />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

}

/**
 * Map the state to props.
 */
const mapStateToProps = (state) => ({
  ...state
});

/**
 * Map the actions to props.
 */
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators(Actions, dispatch)
};


/**
 * Connect the component to
 * the Redux store.
 */
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ClientDash)

。。。
类ClientDash扩展组件{
建造师（道具）{
超级（道具）；
this.state={chartOptions:{}，data1:{}，data2:{}，data3:{}，data4:{}，data5:{}，data6:{}，loaded:false}；
}
loadData（客户端ID）{
var currYear=时刻（）.year（）；
var图表数据={
标签：[（currYear-4）.toString（），（currYear-3.toString（），（currYear-2.toString（），（currYear-1.toString（），currYear.toString（）]，
数据集：[{
类型：'bar'，
标签：“Cat1”，
backgroundColor:this.props.colors[0]。borderColor，
边框颜色：“白色”，
边框宽度：3，
数据：[空，空，空，空，空]
}, {
类型：'bar'，
标签：'Cat2'，
背景色：this.props.colors[1]。borderColor，
边框颜色：“白色”，
边框宽度：3，
数据：[空，空，空，空，空]
}, {
类型：'bar'，
标签：“Cat3”，
背景色：this.props.colors[2]。borderColor，
边框颜色：“白色”，
边框宽度：3，
数据：[空，空，空，空，空]
}, {
类型：'bar'，
标签：'Cat4'，
背景色：this.props.colors[3]。borderColor，
边框颜色：“白色”，
边框宽度：3，
数据：[空，空，空，空，空]
}]
};
var图表选项={
工具提示：{
模式：“索引”，
交集：对
},
回答：对
};
axios（apiCall）
.然后（d=>{
var数据=d.数据；
var data1=u2;.clone（图表数据），
数据2=uu0.clone（图表数据），
数据3=uu0.clone（图表数据），
数据4=uu0.clone（图表数据），
data5=u2;.clone（图表数据），
data6=u2;.clone（图表数据）；
/*一些数据操作*/
log（“加载数据”）；
console.log（this）；
this.setState（{chartOptions:chartOptions，data1:data1，data2:data2，data3:data3，data4:data4，data5:data5，data6:data6，loaded:true}）；
//这个.forceUpdate（）；
}).然后（）
.catch（函数（错误）{
console.log（错误）；
})
}
组件将更新（下一步）{
this.initComp（nextrops.params.clientID）；
}
应更新组件（下一步）{
返回nextrops.params.clientID！=this.props.params.clientID；
}
组件willmount（）{
this.initComp（this.props.params.clientID）；
}
render（）{
console.log（'parent rendering'）
//删除了下面所有不必要的代码
返回(
)
}
}
/**
*将状态映射到道具。
*/
常量mapStateToProps=（状态）=>({
…州
});
/**
*将动作映射到道具。
*/
const mapDispatchToProps=（调度）=>{
返回bindActionCreators（操作、分派）
};
/**
*将组件连接到
*Redux商店。
*/
导出默认连接(
MapStateTops，
mapDispatchToProps
)（ClientDash）

儿童

import React, { Component } from 'react';
import {Bar} from 'react-chartjs-2';
var _ = require('lodash');

class MetricsColumnChart extends Component {
    render() {
        console.log('child rendering')
        return(
            <Bar data={this.props.metricsData} options={this.props.options} />
        )
    }
}

export default MetricsColumnChart

import React，{Component}来自'React'；
从'react-chartjs-2'导入{Bar}；
var=要求（'lodash'）；
类MetricsColumnChart扩展组件{
render（）{
console.log（'child rendering'）
返回(
)
}
}
导出默认度量值柱形图

下面是控制台的外观。如您所见，无需重新渲染，“this”是正确的“this”：

---

问题在于您的

应更新组件。现在，只有当新的
clientID
的道具与当前的
clientID
不同时，它才会返回true。因此，当您在API调用结束时运行
this.setState（）
时，组件不会更新，因为您没有收到新的道具

基本上

接受初始道具
组件将安装运行
启动API调用（异步