Реакция: «.map не является функцией»
Я создаю свое первое приложение React, используя Java Spring в качестве серверной части. Я столкнулся с проблемой при попытке получить данные из API и отобразить их в js. Это выдает мне ошибку fireteam.map is not a function. Вот код проблемы:
import React, { useEffect, useState } from "react";
const FireTeam = () =>{
const [fireteam, setFireTeam] = useState([]);
useEffect(() => {
fetch(`http://localhost:8080/fireteam/id/${localStorage.getItem("fireteamId")}`)
.then(response => response.json())
.then(data => {setFireTeam(data)})
});
return (
<div>
<div>
{fireteam.map(fteam =>
<div key = {fteam.id}>
<p>{fteam.name}</p>
</div>
)}
</div>
</div>
)
}
export default FireTeam
использование console.info в конце запроса на выборку для проверки данных дало мне правильные данные:
{id: 3, name: 'Intercessors', description: 'fdgdfsggfsd', killTeamId: 1}
Так что проблема не в том, как я построил свой запрос на выборку. Я думал, что это может сводиться к проблемам с синхронизацией между fetch() и Javascript, пытающимися сопоставить данные до того, как данные были установлены, поэтому я попытался поместить запрос выборки в функцию async/await и вызвать его в блоке UseEffect, но проблема не устранена.
Привет. Добро пожаловать в СО. карта — это метод массива — он позволяет перебирать массив и возвращать другой массив с таким же количеством (измененных) элементов? Возможно, вы видели это в уроке по React и пытались реализовать, не понимая основ JavaScript map, а также того, почему и где это можно использовать?
Привет большое спасибо. Я видел это в учебнике по React, и мне пока не очень нравятся собственные методы Javascript. Мне просто нужно руководство, поэтому я пришел сюда.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Ваши данные — это не массив, а объект, поэтому использование карты() не сработает. Map() — это функция, которая существует только для массивов, как и filter(), уменьшить(), forEeach() и т. д. Вот почему у вас возникает ошибка «не является функцией».
Вам нужно либо убедиться, что API отправляет массив, например:
[{id: 3, name: 'Intercessors', description: 'fdgdfsggfsd', killTeamId: 1}]
Или, если вы уверены, что у вас всегда будет только объект, выполните:
setFireTeam([data])
В качестве альтернативы, если они ожидают, что fireteam всегда будет одним объектом, они могут удалить массив/отображение из своего кода.
Конечно, да, я написал это на всякий случай, но проблема больше в том, что это всегда должен быть список, а не один элемент.
Огромное спасибо, Арно! Установка данных в виде массива исправила абсолютно все, в конце концов это действительно была проблема типа объекта/массива.
Ваш пример console.info не является массивом. Но функция карты используется для манипуляций с массивами. Чтобы исправить это, вы можете убедиться, что данные получены как fireteam — это массив.
Следующий код сделает это.
import React, { useEffect, useState } from "react";
const FireTeam = () => {
const [fireteam, setFireTeam] = useState([]);
useEffect(() => {
const fetchData = async () => {
const response = await fetch(`http://localhost:8080/fireteam/id/${localStorage.getItem("fireteamId")}`);
const data = await response.json();
setFireTeam([data]);
};
fetchData();
}, []);
return (
<div>
<div>
{fireteam.map(fteam =>
<div key = {fteam.id}>
<p>{fteam.name}</p>
</div>
)}
</div>
</div>
);
}
export default FireTeam;
если вы не хотите менять тип данных на массив, вы можете сделать что-то вроде этого
return (
<div>
<div>
{Object.entries(fireteam).map(fteam =>
<div key = {fteam.id}>
<p>{fteam.name}</p>
</div>
)}
</div>
</div>
)
вы можете прочитать больше здесь, как это работает
Я не против изменить тип данных, но это полезные знания, спасибо.
К вашему сведению, Object.entries возвращает массив кортежей ключ-значение (например, [ключ, значение]) свойств одного объекта, поэтому fteam.id и fteam.name оба будут неопределенными. Я не думаю, что ОП хочет сопоставить свойства одного fireteam объекта. Этот код не будет работать так, как вы ожидаете.
Как отметил в своем ответе Арно Флеш,
dataиз вашего API не является массивом, поэтому у него нет.map()