TypeError: не удается прочитать карту свойства undefined, но состояние было сохранено

Я пытаюсь получить данные конкретной команды из базы данных и сохранить их в состоянии. Но когда я отображаю массив внутри этих данных, он возвращает ошибку. Когда я консоль регистрирую свое состояние, он возвращает данные ниже

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.info(err);
            }
        };
        getTeam();
    }, [fetchContext, row, isLoaded]);

и я отображаю массив players в новую переменную, потому что мне нужны контролируемые входы для моей формы, потому что я обновляю данные. Кстати, я использую Formik

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

Но когда я просто получаю определенное значение, такое как teamName, оно возвращает teamName, а когда я консоль логирую currentTeam.players, он возвращает то, что я ожидал получить. Я не понимаю, почему я получаю такую ​​ошибку

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
27
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваши данные не определены при первом монтировании компонента. Это потому, что useEffect запускает рендеринг после.

Так что добавление нулевой проверки - это решение. Лично я предпочитаю необязательную цепочку. Просто измените на:

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

Лучший ответ !!! Но как мне сопоставить значения в полях ввода?

Junaire Edris Badiang Buico 31.03.2021 14:32

Рад, что помог. Если это решило вашу проблему, примите это как ответ :) Что вы имеете в виду под полями ввода. Вы про тэг jsx <input>?

Sinan Yaman 31.03.2021 14:35

Да вот ссылка на мой вопрос stackoverflow.com/questions/66888690/…

Junaire Edris Badiang Buico 31.03.2021 16:20

К сожалению, я не очень хорошо об этом догадываюсь. никогда не использовал формик

Sinan Yaman 31.03.2021 20:10

Другие вопросы по теме