Блог

Главная - Вопросы по программированию - Получение ошибки при вызове запроса api в NextJS «banner.map не является функцией»

Получение ошибки при вызове запроса api в NextJS «banner.map не является функцией»

#javascript #api #next.js

Вопрос:

поэтому я последовал учебнику, который был довольно простым и просто показывал, как запрашивать данные из API и отображать их. Но когда я перешел к просмотру страницы в моем проекте, NextJS возвращает и выдает ошибку «баннер.карта не является функцией», я поместил свой код ниже, любая помощь будет очень признательна. Вызов API-это «https://fortnite-api.com/v1/banners» который возвращает массив объектов.

     export const getStaticProps = async () => {

    const res = await fetch('https://fortnite-api.com/v1/banners');
    const data = await res.json();

    return {
        props: { banners: data}
    }

}

const FortniteApi = ({ banners }) => {
    return (
        <div>
            <h1>Fortnite Api</h1>
            {banners.map(banner => (
                <div key={banner.id}>
                    <a>
                        <h3>{banner.name}</h3>
                    </a>
                </div>
            ))}
        </div>
    )
}

export default FortniteApi

Ответ №1:

Вам нужно будет получить доступ к другому объекту data внутри:

 return {
  props: { banners: data },
};

Для

 return {
  props: { banners: data.data },
};

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

1. Ты бы поверил, что я думал об этом, лол. Большое спасибо, ценю это!

2. Ха-ха, не лишним будет сначала проверить ответ.

3. Вы также можете использовать другой синтаксис, подобный этому, для доступа к вложенному объекту данных. реквизит: { баннеры: {данные} }

4. Это может потребовать многого, но есть ли способ ограничить объем этих данных, которые я могу запросить? Допустим, я запрашиваю только от 0 до 20 из массива.

5. Это зависит от конечной точки, поддерживают ли они этот запрос или нет. В вашем случае все не так, как я проверил здесь: dash.fortnite-api.com

Метки: