从AXIOS GET请求访问数据时出现React未捕获类型错误(数据未定义)

zfycwa2u  于 2022-10-15  发布在  iOS
关注(0)|答案(1)|浏览(142)

我正在尝试从存储在MongoDB中的集合中获取数据。当我试图获取失眠症的数据时,一切都很正常。当我使用AXIOS发出请求时,我得到以下错误:
未捕获的TypeError:无法读取未定义的属性(读取‘Games’)
我使用定制的钩子

import { useEffect, useState } from "react";
import axios from "axios";

const useFetch = (url) => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);

useEffect(() => {
  const fetchData = async () => {
    setLoading(true);
    try {
      const res = await axios.get(url);
      setData(res.data);
    } catch (err) {
      setError(err);
    }
    setLoading(false);
  };
  fetchData();
}, [url]);

const reFetch = async () => {
  setLoading(true);
  try {
    const res = await axios.get(url);
    setData(res.data);
  } catch (err) {
    setError(err);
  }
  setLoading(false);
};

return { data, loading, error, reFetch };
};

export default useFetch;

然后,我调用useFetch钩子,如您在第三个代码块中所见。当我尝试调用data[0].Games时,我得到了未定义的错误,但当我只是调用data[0]时,没有出现错误,并且数据被打印在控制台中。下面也是我为本例定义的MongoDB模型:

import mongoose from "mongoose";

const SpielSchema = new mongoose.Schema({
    heimName: {
        type: String,
        required: true
    },
    heimTore: {
        type: Number,
        required: true
    },
    auswName: {
        type: String,
        required: true
    },
    auswTore: {
        type: String,
        required: true
    },
});

const TippsSchema = new mongoose.Schema({
    number: {
        type: Number,
        required: true
    },
    date: {
        type: String, 
        required: true
    },
    user: {
        type: String, 
        required: true
    },
    userId: {
        type: String, 
        required: true
    },
    games: [SpielSchema]
})

export default mongoose.model("Spieltag", TippsSchema)

只要我想访问Data[0]中的任何数据。(数字、日期、用户、用户ID、游戏)我收到这个错误。在这里您可以看到React代码,其中我调用useFetch来获取数据。目前,这只是测试代码,因此希望您能更清楚地了解:)

export const Spieltagtipps = (props) => {
  const { user } = useContext(AuthContext);
  const { data, loading, error, reFetch } = useFetch("tipps/find/"+user.username);
  return (
    <>
    {loading ? (
      <h1>Loading...</h1>
    ) : (
    <>
     {data && <h1>{console.log(data[0].games)}</h1>}
    </>
    )
    }
    </>
    )

在这里您可以看到两个输出:
Error when i call data[0].games
No error when i call data[0]

m1m5dgzv

m1m5dgzv1#

您必须检查数组的长度作为呈现的条件,如下所示

{data.length > 0 && <h1>data[0].games</h1>}

您可以查看falsy values in JS
将不在上面列表中的所有REST视为true并通过条件,因此[]也通过

相关问题