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

Question

我正在尝试从数据库中获取数据并将其呈现为条形图中的 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 但它没有呈现在条形图中。我控制台记录了数组，数据都在那里。

Answer 1

React 在组件的状态和 props 发生变化时渲染。 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>
    )

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

Dynamic data in bar chart not rendering React js

javascript

node.js

reactjs

chart.js

axios

为学生列表创建状态

在获取逻辑中设置状态

在图表中使用列表