为什么 React 没有正确处理我的数组？

如何解决为什么 React 没有正确处理我的数组？

当我渲染这个 React 组件时：

import React,{ useState,useEffect,useCallback } from "react";

// import RenderLineChart from "../recharts/rechart.component";
import axios from "axios";

import "./chart-item.styles.scss";

const ChartItem = ({ apiUrl }) => {
    const [chartData,setChartData] = useState([]);

    //function that pulls data from APIs
    const loadChartData = useCallback(() => {
        axios.get(apiUrl).then((response) => {
            setChartData(response.data);
        });
    },[apiUrl]);

    //runs initial pull from API
    useEffect(() => {
        loadChartData();
    },[loadChartData]);

    console.log("Raw Data: ");
    console.log(chartData);

    console.log("Array: ");
    console.log(chartData.historical);

    // console.log("Array Element: ");
    // console.log(chartData.historical[0]);

    return <div className="chart"></div>;
};

export default ChartItem;

控制台输出是这样的：

当我取消注释第三个 console.log 语句并保存组件文件时刷新本地主机，输出是：

但是当我真正刷新本地主机选项卡时，输出是这样的：

就好像它不再被视为数组一样。谁能解释一下这里发生了什么？

解决方法

您发布的代码段中有 2 个错误。

您将 chartData 声明为一个数组，但随后您正在使用一个对象更新它（在 loadChartData 函数内）
当页面加载时，console.log 会在 loadChartData 函数完成请求之前执行，因此在第一次渲染时 chartData = [] and chartData[0] = undefined，但是如果您尝试获取 {{1 }} 它会抛出一个错误，因为它被定义为一个数组。

那么，你如何解决这个问题？答案很简单，首先你必须为你的状态使用一个consistend数据类型，如果它在声明时是一个数组，那么当你更新它时，传递一个数组，如果不是你总是会遇到这种问题.这应该符合您的需求。如果你想在每次更新时记录 chartData.historical[0]，你只需要写一个新的 chartData，里面有 useEffect，console.log 作为“依赖”

chartData

我建议你看看Hooks Documentation

希望对你有帮助✌️