如何在React JSX中渲染Plotly热力图对象？解决Promise报错

错误原因 #

Plotly.newPlot()返回的是Promise对象，你直接将其作为React子元素放入JSX中，React无法渲染Promise，因此抛出"Objects are not valid as a React child"错误。虽然图表能显示，但这个错误是因为Promise被错误地当作UI元素渲染了。

解决方案 #

方案一：基于原生Plotly.js的修正（不引入额外组件） #

通过React的生命周期方法和ref获取DOM容器，在数据加载完成后再调用Plotly渲染，避免直接在JSX中返回Promise：

修改后的完整代码：

import React, { Component } from 'react';
import Plotly from './plotly.js';

export default class App extends Component {
    static displayName = App.name;

    constructor(props) {
        super(props);
        this.state = { 
            binaryData: [], 
            loading: true,
            chartRendered: false // 标记图表是否已渲染，避免重复执行
        };
        this.heatMapRef = React.createRef(); // 创建ref获取热力图容器DOM
    }

    componentDidMount() {
        this.populateWeatherData();
    }

    componentDidUpdate(prevProps, prevState) {
        // 仅当数据加载完成、图表未渲染、容器存在时执行渲染
        if (!this.state.loading && !this.state.chartRendered && this.heatMapRef.current) {
            const heatMapData = [
                {
                    z: [
                        this.state.binaryData.slice(0, 7658134), 
                        this.state.binaryData.slice(7658135, 15316269)
                    ],
                    type: 'heatmap'
                }
            ];

            Plotly.newPlot(this.heatMapRef.current, heatMapData)
                .then(() => this.setState({ chartRendered: true }))
                .catch(err => console.error('热力图渲染失败:', err));
        }
    }

    render() {
        let contents = this.state.loading
            ? <p><em>Loading... Please refresh once the ASP.NET backend has started.</em></p>
            : <div ref={this.heatMapRef}></div>;

        return (
            <div>
                <h1 id="tabelLabel" >Weather forecast</h1>
                <p>This component demonstrates fetching data from the server.</p>
                {contents}
            </div>
        );
    }

    async populateWeatherData() {
        const response = await fetch('weatherforecast');
        const data = await response.json();
        this.setState({ binaryData: data, loading: false });
    }
}

关键改动说明：

• 使用ref获取DOM容器：替代全局id，避免多组件id冲突，符合React最佳实践
• 在componentDidUpdate中渲染：数据加载完成、容器挂载后才执行Plotly渲染，确保DOM元素存在
• 新增chartRendered状态：防止组件状态更新时重复渲染图表
• 处理Promise结果：通过then/catch捕获渲染完成或失败的情况，消除潜在警告

方案二：使用官方React Plotly组件（更简洁） #

安装官方封装的react-plotly.js组件，无需手动操作DOM，完全符合React组件化开发模式：

1. 安装依赖：

npm install react-plotly.js plotly.js

2. 修改代码：

import React, { Component } from 'react';
import Plot from 'react-plotly.js';

export default class App extends Component {
    static displayName = App.name;

    constructor(props) {
        super(props);
        this.state = { binaryData: [], loading: true };
    }

    componentDidMount() {
        this.populateWeatherData();
    }

    render() {
        let contents = this.state.loading
            ? <p><em>Loading... Please refresh once the ASP.NET backend has started.</em></p>
            : (
                <Plot
                    data={[
                        {
                            z: [
                                this.state.binaryData.slice(0, 7658134), 
                                this.state.binaryData.slice(7658135, 15316269)
                            ],
                            type: 'heatmap'
                        }
                    ]}
                    layout={{ width: 800, height: 600 }}
                />
            );

        return (
            <div>
                <h1 id="tabelLabel" >Weather forecast</h1>
                <p>This component demonstrates fetching data from the server.</p>
                {contents}
            </div>
        );
    }

    async populateWeatherData() {
        const response = await fetch('weatherforecast');
        const data = await response.json();
        this.setState({ binaryData: data, loading: false });
    }
}

这种方法无需手动处理Promise和DOM操作，组件内部会自动管理渲染逻辑，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者Chaise