问题描述
当我渲染这个 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
希望对你有帮助✌️