Необработанный отказ (TypeError): невозможно прочитать свойство 'map' из undefined при выполнении учебника React

Question

Выполняю учебник по клонированию хакерских новостей в React и Next.js, но я сталкиваюсь с проблемой. Я читал другие вопросы, связанные с той же ошибкой, но предлагаемые решения не работают для меня. Вот код:

import React from 'react';

const StoryList = ({ stories }) => (
    <div>
        {stories.map(story => (
            <h3 key={story.id}>{story.title}</h3>
        ))}
    </div>
);


export default StoryList;

Ошибкав частности, в строке 4 этого тега div.

Вот моя страница указателя:

import React from 'react';
import fetch from 'isomorphic-fetch';
import Error from 'next/error';

import StoryList from '../components/StoryList';

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 News Clone</h1>
                <StoryList storeis={stories} />
            </div>
        )
    }
}

export default Index;

Answer 1

вы использовали storeis опору и используете как stories

посмотрите это,

<div>
    <h1>Hacker News Clone</h1>
    <StoryList storeis={stories} /> // here prop is storeis
</div>

и использовали как это,

const StoryList = ({ stories }) => ( // and here using as stories 
    <div>
        {stories.map(story => (
            <h3 key={story.id}>{story.title}</h3>
        ))}
    </div>
);

делают обатак же.Я чувствую, что это была ошибка заклинания.