Блог

Главная - Вопросы по программированию - Stories.map-это не функция, NextJS принимает неправильную переменную

Stories.map-это не функция, NextJS принимает неправильную переменную

#javascript #next.js

Вопрос:

итак, моя проблема в том, что у меня есть две переменные, называемые историями, одна из которых взята из библиотеки React, а другая в моем коде. Проблема в том, что он передает неправильную переменную stories, которая затем выдает мне ошибку: «Ошибка типа: stories.map не является функцией», потому что он принимает переменную React stories, а не переменную, которую я создал сам. Ниже приведена картинка, на которой я объясняю это с помощью графики.введите описание изображения здесь

 import React, {Component} from "react";

import fetch from 'isomorphic-fetch'
import Error from 'next/error'

class Index extends React.Component {
    static async getInitialProps() {
        let stories
        try {
            const response = await fetch('https://node-hnapi.herokuapp.com/news?page=1')
            stories = await response.json()
        } catch (err) {
            console.log(err)
            stories =  []
            
        }

        return { stories };
    }

    render() {
        const {stories} = this.props

        if(stories.length === 0) {
            return <Error statusCode={503}/>
        }
        return (
            <div>
                <h1>hacker next</h1>
                <div>
                    {stories.map(story => (
                        <h2 key={story.id}>{story.title}</h2>
                    ))}
                </div>
            </div>
        );
    }
}

export default Index;

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

1. Это две разные переменные. Переменная, которую вы хотите, является локальной для другой функции, вы не можете использовать эту переменную в render методе.

2. Привет, спасибо за ваш ответ, но проблема заключалась в ссылке API. Я изменил его на jsonplaceholder.typicode.com/posts и это сработало. Таким образом, проблема заключалась в процессе извлечения.

Метки: ,