时间戳

首页 > 解决方案 > TypeError：无法读取未定义的属性“地图”，但已存储状态

javascript - TypeError：无法读取未定义的属性“地图”，但已存储状态

问题描述

我正在尝试从数据库中获取特定的团队数据并将其存储在一个状态中。但是当我在该数据中映射一个数组时，它会返回一个错误。当我控制台记录我的状态时，它会返回以下数据

createdAt: "2021-03-19T13:36:22.868Z"
gameEvent: "basketball"
players: Array(5)
0: {_id: "605ea59c5cdf492b48987107", name: "Jerry Ale", jerseyNumber: "12"}
1: {_id: "605ea59c5cdf492b48987108", name: "Judel Agur", jerseyNumber: "14"}
2: {_id: "605ea59c5cdf492b48987109", name: "qwe", jerseyNumber: "12"}
3: {_id: "605ea59c5cdf492b4898710a", name: "qwe", jerseyNumber: "12"}
4: {_id: "605ea59c5cdf492b4898710b", name: "qwe", jerseyNumber: "12"}
length: 5
__proto__: Array(0)
teamName: "Balilihan"
updatedAt: "2021-03-27T03:25:16.148Z"
__v: 0
_id: "6054a8d63fec5c24389624ac"

我有一个 useEffect 来收集这个；

useEffect(() => {
        const getTeam = async () => {
            try {
                const { data } = await fetchContext.authAxios.get('get-all-teams');

                setIsLoaded(true);
                if (isLoaded === true) {
                    setCurrentTeam(data.find((team) => team._id === row._id));
                }
            } catch (err) {
                console.log(err);
            }
        };
        getTeam();
    }, [fetchContext, row, isLoaded]);

我将players数组映射到一个新变量中，因为我想要为我的表单输入一个受控输入，因为我正在更新数据。顺便说一句，我正在使用 Formik

let playersOfTeam = currentTeam.players.map((player, index) => [
            {
                name: player.name,
                jerseyNumber: player.jerseyNumber,
            },
        ]);

但是，当我只获得一个特定值（例如 teamName）时，它会返回 teamName，而当我在控制台记录 currentTeam.players 时，它会返回我期望得到的值。我很困惑为什么会出现这种错误

标签： javascriptreactjsmongodb

解决方案

首次安装组件时，您的数据未定义。这是因为在渲染之后useEffect运行。

所以添加一个空检查是解决方案。我个人更喜欢可选链接。只需更改为：

let playersOfTeam = currentTeam?.players?.map((player, index) => [
            {
                name: player.name,
                jerseyNumber: player.jerseyNumber,
            },
        ]);

推荐阅读