Javascript 从父组件传递道具后组件未得到更新

这是我想更新的雷达图

目前，我正在开发一个应用程序，一旦我们搜索医生，上图中显示的雷达图应该会根据通过道具接收到的新数据进行更新。然而，目前发生的情况是，即使侧边的文本数据正在更新，图表也没有立即更新。只有当我刷新页面时，图表才会更新

下面是您在图片中看到的整个名称组件的代码。正如您在代码中看到的，我直接将数据从道具传递到UniversalChart组件

    class Name extends Component {

state = {
    page_id_name: 1,
    hcp_id: 101,
    nameData: []
};


render() {


    console.log('data inside hcp_overview is: ', this.props)

    return (
        <div>
            <hr style={{ backgroundColor: "light-grey" }} />
            <div class="row m-b-lg m-t-lg" >
                <div class="col-md-3">
                    <div >
                        <div>
                            <h2 class="no-margins">
                                {this.props.data[101].overview.name}
                            </h2>
                            <h4>{this.props.data[101].overview.designation}</h4>
                            <h5>{this.props.data[101].overview.specialty}</h5>
                            <h5>{this.props.data[101].top_three_affiliations[0]}</h5>
                        </div>
                    </div>
                </div>
                <div class="col-md-3" >
                    <h5 style={{ marginLeft: 10 }}>
                        <u>Key Details</u>
                    </h5>
                    <table class="table small m-b-xs" style={{ fontSize: 12 }}>
                        <tbody>
                            <tr>

                                <td>
                                    <strong>NPI: </strong>{this.props.data[101].overview.npi}
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <strong>Gender: </strong>{this.props.data[101].overview.gender}
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <strong>Age: </strong>{this.props.data[101].overview.age}
                                </td>

                            </tr>

                        </tbody>
                    </table>
                </div>
                <div class="col-md-3" >
                    <h5 style={{ marginLeft: 10 }}><u>Top Affiliations</u></h5>
                    <table class="table small m-b-xs" style={{ fontSize: 12 }} >
                        <tbody>
                            <tr>

                                <td>
                                    {this.props.data[101].top_three_affiliations[0]}
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    {this.props.data[101].top_three_affiliations[1]}
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    {this.props.data[101].top_three_affiliations[2]}
                                </td>

                            </tr>

                        </tbody>
                    </table>
                </div>
                <div class="col-md-3" >
                    <UniversalChart
                        type={this.props.data[101].chart_data_config.chartType}
                        data={this.props.data[101].datasets}
                        options={this.props.data[101].chart_data_config}
                        labels={this.props.data[101].labels}
                        key={this.props.data[101].datasets}
                    />
                </div>

            </div>

        </div>
    )
}

类名扩展组件{
状态={
页码\标识\名称：1，
hcp_id:101，
名称数据：[]
};
render（）{
console.log（'hcp_概览中的数据为：'，this.props）
返回(

{this.props.data[101].overview.name}
{this.props.data[101].overview.designation}
{this.props.data[101].overview.speciality}
{this.props.data[101]。前三名隶属关系[0]}
关键细节
NPI:{this.props.data[101].overview.NPI}
性别：{this.props.data[101].overview.Gender}
年龄：{this.props.data[101].overview.Age}
高层附属机构
{this.props.data[101]。前三名隶属关系[0]}
{this.props.data[101]。前三名隶属关系[1]}
{this.props.data[101]。前三名隶属关系[2]}
)
}

这是我的UniversalChart组件，它使用ChartJS显示图表

   class UniversalChart extends Component {
state = {
    
}

chartRef = React.createRef();


componentDidMount() {

    const myChartRef = this.chartRef.current.getContext("2d");

    

    new Chart(myChartRef, {
        type: this.props.type,
        data: { labels: this.props.labels, datasets: this.props.data },
        options: JSON.parse(this.props.options.chartOptions)
    })
}

render() {
    return <canvas ref={this.chartRef} height={this.props.height} />
}

}

class UniversalChart扩展组件{
状态={
}
chartRef=React.createRef（）；
componentDidMount（）{
const myChartRef=this.chartRef.current.getContext（“2d”）；
新图表（myChartRef{
类型：this.props.type，
数据：{标签：this.props.labels，数据集：this.props.data}，
选项：JSON.parse（this.props.options.chartOptions）
})
}
render（）{
返回
}
}

关于React Component Lifecycle方法，我是否遗漏了一些内容？请重申，右侧的所有数据都会更新，但图表本身不会更新。如果需要添加任何其他信息，请告诉我

这里是编辑的通用图表组件，我尝试了@Giovanni Esposito的建议

   class UniversalChart extends Component {
state = {
    
}

chartRef = React.createRef();


componentDidUpdate(prevProps, prevState) {
    if(prevProps.data !== this.props.data){
        const myChartRef = this.chartRef.current.getContext("2d");

        new Chart(myChartRef, {
            type: this.props.type,
            data: { labels: this.props.labels, datasets: this.props.data },
            options: JSON.parse(this.props.options.chartOptions)
        })

    }
}


componentDidMount() {

    const myChartRef = this.chartRef.current.getContext("2d");
    

    new Chart(myChartRef, {
        type: this.props.type,
        data: { labels: this.props.labels, datasets: this.props.data },
        options: JSON.parse(this.props.options.chartOptions)
    })

}

render() {
    console.log('props inside render of universal chart is: ', this.props);
    console.log('state inside render of univ chart is: ', this.state);
    return <canvas ref={this.chartRef} height={this.props.height} />
}

  }

class UniversalChart扩展组件{
状态={
}
chartRef=React.createRef（）；
componentDidUpdate（prevProps、prevState）{
if（prevProps.data！==此.props.data）{
const myChartRef=this.chartRef.current.getContext（“2d”）；
新图表（myChartRef{
类型：this.props.type，
数据：{标签：this.props.labels，数据集：this.props.data}，
选项：JSON.parse（this.props.options.chartOptions）
})
}
}
componentDidMount（）{
const myChartRef=this.chartRef.current.getContext（“2d”）；
新图表（myChartRef{
类型：this.props.type，
数据：{标签：this.props.labels，数据集：this.props.data}，
选项：JSON.parse（this.props.options.chartOptions）
})
}
render（）{
console.log（'universal chart的呈现内部的props为：'，this.props）；
console.log（'univ图表呈现内部的状态为：'，this.state）；
返回
}
}

如果有人对代码有任何疑问，请告诉我。谢谢。乍一看，当道具更新时，您似乎没有更新图表。要更新图表，您应该使用

componentdiddupdate

事件。看这里，我尝试了componentdiddupdate，但它显示了一种奇怪的行为。图表更新为正确的数据，但当我将光标悬停在图表的某些部分时，它会翻转回去表示以前的数据。当我将光标悬停在图表的其他部分时，它会再次翻转回去表示正确的当前数据。您能否在数据更新处添加一行？我已编辑了通用图表组件代码，以指示我尝试在哪里进行组件更新。