我正尝试从存储在 MongoDB 中的集合中获取数据。 当我尝试在 Insomnia 中获取数据时，一切都正常。当我使用 axios 发出请求时，我收到以下错误：
Uncaught TypeError：无法读取未定义的属性（读取“游戏”）

我使用自定义钩子

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、游戏），我就会收到此错误。 在这里你可以看到我调用 useFetch 获取数据的 React 代码。目前这只是测试代码，希望你能看得更清楚 :)

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>}
    </>
    )
    }
    </>
    )

在这里你可以看到两个输出：
调用 data[0].games 时出错
调用 data[0] 时无错误