TypeError：无法读取未定义的属性“映射”-尝试将值映射到卡时

Question

所以我尝试按照here

的教程将我的帖子详细信息映射到卡片

它给出了“TypeError: Cannot read property 'map' of undefined”

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

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

./src/components/dummy-posts.js

第 1:7 行：“posts”被分配了一个值，但从未使用过 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;

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"
    }
   ]

请帮助我。在此先感谢。

Answer 1

编译器警告直接与问题相关。这就是说“posts 被分配了一个值但从未使用过”正是因为您定义了posts 变量但不对其做任何事情。在 JavaScript 中，为了像在 posts.js 中一样导入它，您必须在要导入的文件中导出它。

您必须导出posts。在dummy_posts.js 文件的末尾，您可以添加：

module.exports = { posts };

或者，正如@AtinSingh 建议的那样，我们可以这样做：

export const posts = [...your array...];