為什么 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;

控制台 output 是這樣的：

當我取消注釋第三個 console.log 語句並保存組件文件而不刷新 localhost 時，output 是：

但是當我實際刷新 localhost 選項卡時，output 是這樣的：

好像它不再被視為一個數組。 誰能解釋這里發生了什么？

Answer 1

您發布的代碼段中有 2 個錯誤。

1. 您將chartData聲明為一個數組，但隨后您將使用 object （在loadChartData函數內部）對其進行更新

2. 當頁面加載時， console.log在loadChartData function 完成請求之前執行，所以在第一次渲染chartData = [] and chartData[0] = undefined ，但是如果你嘗試獲取chartData.historical[0]它會拋出你一個錯誤，因為它被定義為一個數組。

那么，你怎么能解決這個問題呢？ 答案很簡單，首先你必須為你的 state 使用一致的數據類型，如果它在聲明時是一個數組，那么當你更新它時，傳遞一個數組，如果不是你總是會遇到這種問題. 這應該符合您的需求。 如果您想在每次更新時記錄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 文檔

希望這會有所幫助✌️