у меня проблема с запросом async/await with axios пишет что map is not a fn но когда использую 2 запрос то все ок в чем проблема 1 запроса?

Рейтинг: 0Ответов: 1Опубликовано: 31.05.2023
import './style.css';
import axios from 'axios';
import AnimeList from './AnimeList';

const Anime = () => {
    const [animeData, setAnimeData] = useState();
    const [search, setSearch] = useState('Naruto');

    const getData = async () => {
        try {
            const res = await axios.get(apiUrl);
            setAnimeData(res.data);
            console.log(res.data);
        } catch (error) {
            console.log(error);
        }

        // const res = await fetch(apiUrl)
        // const resData = await res.json()
        // setAnimeData(resData.data)
    };

    const apiUrl = `https://api.jikan.moe/v4/anime?q=${search}&sfw`;

    useEffect(() => {
        getData();
    }, [search]);

    return (
        <>
            <div className='header'>
                <h1>MyAnimeList</h1>
                <div className='search-box'>
                    <input
                        type='text'
                        placeholder='Search your anime'
                        onChange={e => setSearch(e.target.value)}
                    />
                </div>
            </div>

            <div className='container'>
                <div className='animeInfo'></div>
                <div className='anime-row'>
                    <h2 className='text-heading'>Anime</h2>
                    <div className='row'>
                        <AnimeList animeList={animeData} />
                    </div>
                </div>
            </div>
        </>
    );
};

export default Anime; 

import React from 'react';

const AnimeList = ({ animeList }) => {
    console.log(animeList);
    return (
        <>
            {animeList
                ? animeList.map((el, index) => {
                        return (
                            <>
                                <div className='card'>
                                    <img
                                        src='https://cdn.myanimelist.net/images/anime/13/17405l.jpg'
                                        alt='animeImage'
                                    />
                                    <div className='anime-info'>
                                        <h4>Naruto</h4>
                                    </div>
                                </div>
                            </>
                        );
                  })
                : 'Not found'}
        </>
    );
};

export default AnimeList;


Ответы

▲ 0

По всей видимости что у строки string нету функции map? Надо удостоверится что axios получает нужный заголовок Content-Type: application/json иначе он возвращает в data обычную строку. Если повлиять на заголовки не является возможным, то можно просто в конфиге указать обработчик ответа, который будет пробовать JSON.parse на ответ сервера.

Во втором примере, ты явно говоришь fetch что хочешь json.

Полезное чтиво по теме: