Prime React Chart Axios 数据未加载答案

【问题标题】：Prime React Chart Axios data does not loadPrime React Chart Axios 数据未加载
【发布时间】：2023-02-03 00:03:44
【问题描述】：

我尝试使用 rest api 在图形中加载数据，但由于某种原因它没有加载，你能帮助我吗

这是api带来的数据 { “avg_soc_fleet”：74.85 }

这是代码

const Rem = () => {

    const [avgSoc, SetAvgSoc] = useState({});
    

    



    useEffect(() => {
        axios.get('http://127.0.0.1:8000/other/avgsoc_fleet').then(response => {
            SetAvgSoc(response.data);

        })

        

    }, []);

   

    
    const [avgChart] = useState({
        labels: ['Soc', 'Pressure', 'Isolation', 'BattVolt24'],

        datasets: [
            {
               
                data: [Object.values(avgSoc)],
                fill: false,
                borderColor: '#4bc0c0',
                tension: .4
            },


        ]
    });

    const options = {
        legend: {
            display: true,
        }
    };



    return (
        <div className="grid">
            <div className="col-8">
                <div className="card">
                    <Chart type="line" data={avgChart} options={options} />


                </div>
            </div>
        </div>
    );
};

export default Rem;

渲染图表我希望我可以在反应中从图中的 api 加载数据

【问题讨论】：

标签： javascript reactjs api axios primereact

【解决方案1】：

获取数据后，您需要再次更新avgChart。使用 setState 方法

const [avgChart, setAvgChart] = useState({

添加新的useEffect

useEffect(() => {
    if(avgSoc.length){

          setAvgChart({
             ...avgChart,
             datasets: {
                ...avgChart.datasets
                data: [Object.values(avgSoc)], 
             }
          })
    }

    

}, [avgSoc]);

【讨论】：