未处理的拒绝（TypeError）：在执行React教程时无法读取未定义的属性“ map”

Question

在React和Next.js中做一个Hacker News Clone教程，但是我遇到了一个问题。我已经阅读了处理相同错误的其他问题，但是提供的解决方案对我不起作用。这是代码：

import React from 'react';

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


export default StoryList;

该错误专门在第一个div标签的第4行上。

这是我的索引页：

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>
);

使两者相同。我觉得那是拼写错误。