我正在尝试从存储在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]
1条答案
按热度按时间m1m5dgzv1#
您必须检查数组的长度作为呈现的条件,如下所示
您可以查看falsy values in JS
将不在上面列表中的所有REST视为
true
并通过条件,因此[]
也通过