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

Question

当我渲染这个 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 语句并保存组件文件而不刷新本地主机时，输出是：

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

就好像它不再被当作一个数组一样。谁能解释一下这是怎么回事？

Answer 1

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

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

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

const [chartData, setChartData] = useState({ historical: [] })

// declare you api call
const apiCall = useCallback(() => {
  try {
    const response = await axios.get(url);
    setChartData(response.data)
  } catch (e) {
    console.error(e)
  }
}, [setChartData])

useEffect(() => {
  apiCall()
}, [apiCall])

useEffect(() => {
  console.log("Raw Data: ");
  console.log(chartData);

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

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

// do you stuff with jsx

我建议你看看Hooks Documentation

希望对您有所帮助✌️

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

Why is React not treating my array properly?

javascript

debugging

console.log

reactjs