类型错误:无法读取未定义的属性“映射”-当试图将值映射到卡时

所以我试着绘制地图我的帖子详细信息到卡片遵循中的教程这里

它给出了“类型错误:无法读取未定义的属性‘映射’”

我搜索了stackoverflow和其他网站，但没有人帮我解决这个问题。

编译器也给了我这个警告。

./src/components/dummy-posts.js

Line 1:7: 'posts' is assigned a value but never used no-unused-vars
下面是我的代码 App.js

import React, { Component } from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar'
import TypoGraphy from '@material-ui/core/Typography'
import NavBar from './components/nav'
import Posts from './components/posts'

class App extends Component {
  render() {
    return (
      <div>
        <div>
        <AppBar color="primary" position="static">
          <Toolbar>
            <TypoGraphy variant="title" color="inherit">
              My header
           </TypoGraphy>
           <NavBar />
          </Toolbar>
        </AppBar>
        </div>
        <Posts/>  {/*This is the function which gets the posts component*}
      </div>
    );
  }
}
export default App;

posts.js

import React from "react";
import { Grid,Typography } from "@material-ui/core";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Button from "@material-ui/core/Button";
import { posts } from "./dummy-posts";

function Posts(props) {
  return (
    <div style={{ marginTop: 20, padding: 30 }}>
      <Grid container spacing={40} justify="center">
        {posts.map(post => (               {/*Here's where the error occurs*/}
          <Grid item key={post.title}>
            <Card>
              <CardActionArea>
                <CardMedia
                  component="img"
                  alt="Contemplative Reptile"
                  height="140"
                  image={post.image}
                  title="Contemplative Reptile"
                />
                <CardContent>
                  <Typography gutterBottom variant="h5" component="h2">
                    {post.title}
                  </Typography>
                  <Typography component="p">{post.excerpt}</Typography>
                </CardContent>
              </CardActionArea>
              <CardActions>
                <Button size="small" color="primary">
                  Share
                </Button>
                <Button size="small" color="primary">
                  Learn More
                </Button>
              </CardActions>
            </Card>
          </Grid>
        ))}
      </Grid>
    </div>
  );
}

export default Posts;

posts.js

import React from "react";
import { Grid,Typography } from "@material-ui/core";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Button from "@material-ui/core/Button";
import { posts } from "./dummy-posts";

function Posts(props) {
  return (
    <div style={{ marginTop: 20, padding: 30 }}>
      <Grid container spacing={40} justify="center">
        {posts.map(post => (               {/*Here's where the error occurs*/}
          <Grid item key={post.title}>
            <Card>
              <CardActionArea>
                <CardMedia
                  component="img"
                  alt="Contemplative Reptile"
                  height="140"
                  image={post.image}
                  title="Contemplative Reptile"
                />
                <CardContent>
                  <Typography gutterBottom variant="h5" component="h2">
                    {post.title}
                  </Typography>
                  <Typography component="p">{post.excerpt}</Typography>
                </CardContent>
              </CardActionArea>
              <CardActions>
                <Button size="small" color="primary">
                  Share
                </Button>
                <Button size="small" color="primary">
                  Learn More
                </Button>
              </CardActions>
            </Card>
          </Grid>
        ))}
      </Grid>
    </div>
  );
}

export default Posts;

**dummy-posts.js **

const posts=[

    {
     title: "My first post",
     excerpt: "This is my first post with more content inside",
     image: "random_url"
    },

    {
     title: "My second post",
     excerpt: "This is my second post with more content inside",
     image: "random_url"
    },

    {
     title: "My third post",
     excerpt: "This is my third post with more content inside",
     image: "random_url"
    },

    {
     title: "My fourth post",
     excerpt: "This is my fourth post with more content inside",
     image: "random_url"
    },

    {
     title: "My fifth post",
     excerpt: "This is my fifth post with more content inside",
     image: "random_url"
    },

    {
     title: "My sixth post",
     excerpt: "This is my sixth post with more content inside",
     image: "random_url"
    }
   ]