类型错误:无法读取未定义的属性“映射”-当试图将值映射到卡时-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

┭┮﹏┭┮ 2019-12-31 20:22:53 1197

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

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

我搜索了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"
    }
   ]
属性错误 sdk属性 定时错误 定时属性 EDAS错误
分享到
取消 提交回答
全部回答(1)
  • ┭┮﹏┭┮
    2019-12-31 20:27:30
    已采纳

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

    你必须出口posts。在你的最后dummy _ posts.js文件,您可以添加

    module . exports = { post };
    

    或是

    export const posts = [...your array...];
    
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

相似问题
最新问题