Блог

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

Ошибка типа: users.map не является функцией при вызове api с youtube

#reactjs #api

Вопрос:

Я работаю с reactjs и, похоже, не могу предотвратить эту ошибку при попытке извлечь данные из api YouTube.Это мой URL-адрес ключа api https://youtube.googleapis.com/youtube/v3/search?part=snippetamp;channelId=UCd4bDhA66nR3d78wef255Pgamp;key=AIzaSyB5iWURFaBb-j4abPBG91bfXbAYDDT2oHM

 import React, {useState,useEffect } from 'react';

const UseEffectAPI=()=>{

const [users,setUsers]=useState([]);
const getUsers=async()=>{
const response=await fetch('https://youtube.googleapis.com/youtube/v3/search?part=snippetamp;channelId=UCd4bDhA66nR3d78wef255Pgamp;key=AIzaSyB5iWURFaBb-j4abPBG91bfXbAYDDT2oHM');
console.log(response);
setUsers(await response.json());
}

useEffect(()=>{
getUsers();
},[]);


return (
    <>

<div>
<h2>List of GitHub Users</h2>
<div className="container-fluid mt-5">
<div className="row text-center">

{
users.map((curELem)=>{
return(
<div>
    <div className="col-10 col-md-4 mt-5" >
     <div className="card p-2">
         <div className="d-flex align-items-center">
            <div className="image"> <img src={curELem.avatar_url} className="rounded" width="155" /> </div>
                <div className="ml-3 w-100">
                  <h4 className="mb-0 mt-0 textLeft">{curELem.login}</h4>
                        {/* <span className="text-left">{type }</span> */}
                           <div className="p-2 mt-2 bg-primary d-flex justify-content-between rounded text-white stats">
                             <div className="d-flex flex-column">
                             <span className="articles">{curELem.id}</span> <span className="number1">38</span> </div>
                                <div className="d-flex flex-column">
                              <span className="followers">Followers</span> <span className="number2">980</span> </div>
                            <div className="d-flex flex-column">
                                <span className="rating">Rating</span> <span className="number3">8.9</span> </div>
                       </div>
                    </div>
                </div>
            </div>
         </div>
    </div>
)
})
}




</div>
</div>
</div>
    </>
);
}
export default UseEffectAPI;

Ответ №1:

В ответе вы получаете объект, который вы не можете отобразить, и этим перезаписываете свое состояние. Вам нужна коллекция для map чего-то, например, массива.

Так что, setUsers([...users, reponse.json])

Метки: