Введение
Работа с React - непростая задача. Вы можете столкнуться с ошибками, которых не понимаете. Одна из проблем, с которыми вы можете столкнуться при работе с API, - это ошибка «TypeError: не удается прочитать свойство‘ map ’of undefined». Это может сбить вас с толку и свести с ума. Проблема не в API или том, как вы структурировали свои компоненты в React, главный виновник - это сам React. Если вы продолжите читать ниже, я объясню вам причину возникновения ошибки, пару решений, как ее преодолеть, и некоторые демонстрации самих решений.
Что это значит
Что именно означает загадочная ошибка? Ответ на эту проблему - React. Фреймворк имеет асинхронную проблему. Чтобы представить это с другой точки зрения, React не ждет выборки данных. Может показаться, что вы отображаете массив, однако асинхронное поведение фреймворка вызывает серьезные проблемы и проблемы с отображением ваших JSX-элементов. Вот демонстрация ниже для большей ясности.
Решение 1
Решение может показаться проще, чем вы думаете. Одно простое решение - добавить пустой массив, когда дело доходит до выборки данных. Например, когда вы загружаете свой API и устанавливаете для хука начальное значение, просто измените его на пустой массив. Это будет работать, потому что React будет использовать метод карты в пустом массиве, когда вы ждете, чтобы получить этот API. Это не вызовет никаких проблем, потому что пока вы ждете получения данных, визуализировать нечего. В 9 случаях из 10 у нас есть пустое начальное значение. установка массива, скорее всего, будет решением вашей проблемы. Вот демонстрация ниже для большей ясности.
Решение 2
Если первоначальное решение не сработает, вам, возможно, придется проявить хитрость и выполнить условный рендеринг. Этот метод эффективен и дает быстрые результаты. Вы хотите начать с объявления переменной. Далее создайте условие, которое автоматически принимает значение true. В пределах истинного оператора сопоставьте желаемый массив и верните его. Последний шаг является необязательным, вы можете добавить строку загрузки в оператор else для более чистого взаимодействия с UX / UI. Вот полный код ниже.
Если первоначальное решение не сработает, вам, возможно, придется проявить хитрость и выполнить условный рендеринг. Этот метод эффективен и дает быстрые результаты. Вы хотите начать с объявления переменной. Далее создайте условие, которое автоматически принимает значение true. В пределах истинного оператора сопоставьте желаемый массив и верните его. Последний шаг является необязательным, вы можете добавить строку загрузки в оператор else для более чистого взаимодействия с UX / UI. Вот полный код ниже.
