条形图中的动态数据不呈现 React js答案

【问题标题】：Dynamic data in bar chart not rendering React js条形图中的动态数据不呈现 React js
【发布时间】：2022-01-18 18:24:18
【问题描述】：

我正在尝试从数据库中获取数据并将其呈现为条形图中的 x 轴标签。

import React, { useState, useEffect } from "react";
import "../styling/ClassGrades.css";
import { Bar } from "react-chartjs-2";
import Axios from "axios";

function ClassGrades() {
    let studentsArray = [];

    useEffect(() => {
        Axios.get("http://localhost:1337/api/getStudentsFromClass", {
            params: { currentClassClicked }
        }).then(response => {
            setStudents(response.data.message);
            // console.log(response.data.message)
            for (let i = 0; i < response.data.message.length; i++) {
                studentsArray.push(String(response.data.message[i].firstName));
            }
            console.log(studentsArray);

            // console.log(response.data.message[0].firstName)
        });
    }, []);

    console.log(studentsArray);

    const currentClassClicked = localStorage.getItem("currentClassClicked");
    console.log(currentClassClicked);
    const [students, setStudents] = useState([]);
    return (
        <div className="class-grades-container">
            <h1>{currentClassClicked}</h1>
            <Bar
                data={{
                    labels: studentsArray,
                    datasets: [
                        {
                            label: "student grades",
                            data: [30, 80, 20, 10]
                        }
                    ]
                }}
            />
        </div>
    );
}

export default ClassGrades;

我创建了一个数组，在useEffect 挂钩中，每个数据都添加到studentsArray，但它不会在条形图中呈现。我控制台记录了数组，数据就在那里。

【问题讨论】：

标签： javascript node.js reactjs axios chart.js

【解决方案1】：

当组件的 state 和 props 发生变化时，React 会渲染。 studentsArray 是一个既不是状态也不是道具的数组。所以 react 不知道你所做的更改。按照以下步骤获取数据的反映

为学生列表创建状态

您需要将学生列表存储在组件的状态中

const [list, setList] = useState([])

在获取逻辑中设置状态

 useEffect(() => {
        const studentsArray = []; 
        Axios.get("http://localhost:1337/api/getStudentsFromClass", {
            params: {currentClassClicked}
        }).then((response) => {
            setStudents(response.data.message)
            // console.log(response.data.message)
            for (let i = 0; i<response.data.message.length; i++){
                studentsArray.push(String(response.data.message[i].firstName))
            }
            setList(studentsArray)
        })
    }, [])

在图表中使用列表

在 DOM 中使用状态列表

 return (
        <div className='class-grades-container'>
            <h1>{currentClassClicked}</h1>
                <Bar 
                    data={{
                        labels: list,
                        datasets: [
                            {
                                label: "student grades",
                                data: [30, 80, 20, 10]
                            }
                        ]
                    }}
                />
        </div>
    )

【讨论】：