如何将Promise返回数据绑定到React Material Chart？代码问题排查

核心问题 #

• React组件的渲染仅依赖**状态（state）或属性（props）**的变化，你用普通变量data4存储数据，即便在Promise回调里修改了它的值，React也无法感知到这个变化，不会触发组件重新渲染，所以图表始终拿到的是空数组。
• 另外，直接在组件函数体里调用ReadString()，会导致每次组件渲染时都重复执行这个异步操作，造成不必要的资源消耗。

修复后的代码 #

import React, { useState, useEffect } from 'react';
import Paper from "@material-ui/core/Paper";
import {ArgumentAxis, Chart, LineSeries, ValueAxis} from '@devexpress/dx-react-chart-material-ui';
    
const App =  () => {
    // 用useState声明状态变量，管理图表数据
    const [data4, setData4] = useState([]);

    // 用useEffect执行异步数据读取，确保只在组件挂载时执行一次
    useEffect(() => {
        ReadString()
            .then(a => {
                setData4(a); // 调用状态更新函数，触发组件重新渲染
            })
            .catch(e => {
                console.log('e =>' + e)
            });
    }, []); // 空依赖数组表示仅在组件首次挂载时执行

    return (
        <Paper>
            <Chart data={data4}>
                <ArgumentAxis/>
                <ValueAxis/>
                <LineSeries valueField="y" argumentField="x"/>
            </Chart>
        </Paper>
    );
}

关键修改说明 #

• 用useState替代普通变量：状态变量的更新会自动通知React重新渲染组件，图表就能获取到最新的数据源。
• 用useEffect包裹异步操作：通过空依赖数组限制执行时机，避免重复发起数据请求。
• 调用setData4更新数据：不再直接给变量赋值，而是使用React提供的状态更新函数，这是组件内更新数据的标准方式。

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