Javascript Axios获取数据

我无法从API中获取数据并将其显示在页面上。有时数据已定义，我没有问题，但有时我会遇到错误“TypeError:无法读取未定义的属性'calls'。我不确定我的useEffect是否有问题，或者发生了什么，我认为这将在显示数据之前等待提取数据。提前感谢您的帮助

import React, { useState, useEffect, useCallback } from "react";
import { Line } from "react-chartjs-2";
import AuthService from "../../services/auth.service";
import axios from 'axios';
import _, { map } from 'underscore';


const LineChart = () => {
  const currentUser = AuthService.getCurrentUser();
  const [data, setData] = useState();

  const authAxios = axios.create({
    baseURL: `http://localhost:3000`,
    headers: {
      'Authorization': `Bearer ${currentUser.token}`,
      'Access-Control-Allow-Origin': '*',
    }
  });

  const fetchData = async () => {
    try {
      const result = await authAxios.get('/call/' + currentUser.id);
      setData(result.data);
    } catch (err) {
      console.log(err.message);
    }
  };

  useEffect(() => {
    fetchData();
  }, [setData]);

  return (
    <>
      <div className="relative bg-white p-6 rounded-lg shadow-lg">
        <div className="relative bg-blueGray-100">
          <h6 className="uppercase mb-1 text-xl font-semibold">
            Filler Words Used Per Call
          </h6>
          <Line
            data={{
              labels: _.range(1, Object.keys(data.calls).length + 1),
              datasets: [
                {
                  label: "Phone Calls",
                  fill: false,
                  lineTension: 0.5,
                  backgroundColor: "rgba(75,192,192,1)",
                  borderColor: "rgba(0,0,0,1)",
                  borderWidth: 2,
                  data: [65, 59, 80, 81, 56],
                }
              ]
            }}
            options={{
              title: {
                display: true,
                text: "Phone Calls",
                fontSize: 20,
              },
              legend: {
                display: true,
                position: "right",
              },
            }}
          />
        </div>
      </div>
    </>
  )
};
export default LineChart;

import React，{useState，useffect，useCallback}来自“React”；
从“react-chartjs-2”导入{Line}；
从“../../services/auth.service”导入AuthService；
从“axios”导入axios；
从“下划线”导入{map}；
常数折线图=（）=>{
const currentUser=AuthService.getCurrentUser（）；
const[data，setData]=useState（）；
const authAxios=axios.create({
基本URL：`http://localhost:3000`,
标题：{
'Authorization'：'Bearer${currentUser.token}`，
“访问控制允许来源”：“*”，
}
});
const fetchData=async（）=>{
试一试{
const result=wait authAxios.get（'/call/'+currentUser.id）；
setData（result.data）；
}捕捉（错误）{
控制台日志（错误消息）；
}
};
useffect（（）=>{
fetchData（）；
}，[setData]）；
返回(
每次通话使用的填充词
)
};
导出默认线形图；

有条件地呈现

行

组件：

{data&&}

---

无关问题：您仍然应该像其他人建议的那样，从

useffect

依赖性数组中删除

setData

，但它不会解决缺少数据的问题。您只希望在装载时获取一次数据，因此将依赖关系数组保留为空。

您仍然需要删除

useffect

的依赖关系。另一个问题是由于某种原因，

数据

是

未定义的

。

组件可能在填充

数据之前进行渲染

为
添加条件呈现，例如
{data&&&…}
。然后，
行
组件只有在
数据
有值时才会呈现。
它不应该是
数据
而不是
设置数据
=>
使用效果（（）=>{fetchData（）；}，[data]）我在更改它时仍然存在相同的问题。
标签：u.range（1，Object.keys（data.calls）.length+1），
行在初始加载时失败，因为axios是异步的。只有当数据可用时，才能保留检查并返回。如果将
数据
初始化为空数组，
数据&&
将计算为
真
。在这种情况下，您需要检查
data.length
。啊，糟糕。我把事情搞混了，认为数据是一个数组。很好，谢谢。不管
setData
是否在依赖项数组中。无论哪种方式，它都只能卖一次。知道这一点很好，但这不可能是把它放在那里的好理由。谢谢你的帮助！我的问题现在解决了！