Javascript 未处理的拒绝（TypeError）：无法读取属性'；地图'；执行React教程时未定义的

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

从“React”导入React；
常量故事列表=（{stories}）=>(
{stories.map（story=>(
{story.title}
))}
);
导出默认故事列表；

错误具体在第一个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;

从“React”导入React；
从“同构提取”导入提取；
从“下一个/错误”导入错误；
从“../components/StoryList”导入故事列表；
类索引扩展了React.Component{
静态异步getInitialProps（）{
让故事；
试一试{
const response=等待获取(
'https://node-hnapi.herokuapp.com/news?page=1'
);
stories=wait response.json（）；
}捕捉（错误）{
控制台日志（err）；
故事=[]
}
返回{故事}；
}
render（）{
const{stories}=this.props；
如果（stories.length==0）{
返回；
}
返回(
黑客新闻克隆
)
}
}
出口违约指数；

您已经使用了

storeis

prop并将其用作

故事

看这个,

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

const-StoryList=（{stories}）=>（//这里使用as-stories
{stories.map（story=>(
{story.title}
))}
);

使两者相同。

---

我觉得这是拼写错误。

您使用了

storeis

道具并将其用作

故事

看这个,

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

const-StoryList=（{stories}）=>（//这里使用as-stories
{stories.map（story=>(
{story.title}
))}
);

使两者相同。

---

我觉得那是拼写错误。

你是故意的吗？应该是“可能是打字错误吗？”？您将道具作为

storeis

传递。您是故意的吗？应该是“可能是打字错误吗？”？您正在将道具作为

storeis

传递。