Блог

Главная - Вопросы по программированию - react.js Ошибка типа: lights.map не является функцией

react.js Ошибка типа: lights.map не является функцией

#reactjs #axios

Вопрос:

Поэтому я пытаюсь сопоставить данные, которые я получаю из этого api, но он выдает ошибку «Ошибка типа: lights.map не является функцией» Вот функция, которая вызывается для вызова из API:

 function getLight(){  Axios.get('http://{IP}/api/{KEY}/lights').then((res) =gt;{  console.log(res.data)  setLights(res.data)  }) }

А вот моя карта:

 lt;button onClick={getLight}gt;Lights 1lt;/buttongt;  lt;divgt;   {lights.map((light) =gt;{  return(  lt;ligt;{light.name}lt;/ligt;  )  })}  lt;/divgt;

Комментарии:

1. Привет! Карты работают только в массиве, проверьте, является ли res.data массив

2. Что это за тип lights ? Это объект, массив, строка…?

3. Извините, что моя ошибка тоже забыла это показать, но я определил это так: const [огни, светильники] = useState([]);

4. Я уверен, что вы инициализировали lights с [] помощью, но когда lights он будет обновлен, он может принимать любое значение, которое может быть объектами, строками и т. Д. Итак, вам следует проверить, в чем дело datatype res.data . Если это «массив», то только вы можете map над ним работать или вам нужно каким-то образом преобразовать его в массив.

Ответ №1:

Вы должны быть уверены, что огни всегда будут массивом, чтобы вы могли использовать функцию карты.

Если вы не уверены, что огни будут массивом, вы можете использовать

 lt;gt; {lights?.map amp;amp; lights.map((something)=gt;lt;divgt;{something}lt;/divgt;)} lt;/gt;

Или, если у вас нет доступа к современному синтаксису

 lt;gt; {lights amp;amp; lights.map amp;amp; lights.map((something)=gt;lt;divgt;{something}lt;/divgt;)} lt;/gt;

Таким образом, вы проверите, действительно ли функция map существует в объекте lights(или его прототипе), прежде чем использовать ее, а если нет — вернитесь неопределенным, и React не отобразит эту строку jsx (вы можете отобразить какую-то анимацию загрузчика, например, пока у вас нет массива).

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

Метки: