所以我试着绘制地图我的帖子详细信息到卡片遵循中的教程这里
它给出了“类型错误:无法读取未定义的属性‘映射’”
我搜索了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"
}
]
编译器警告与问题直接相关。这是说”posts被赋予一个值,但从未使用“正是因为您定义了posts变量,但不要做任何事情。在JavaScript中,为了像在posts.js中一样导入它posts.js,你必须出口它在正在导入的文件中。
你必须出口posts。在你的最后dummy _ posts.js文件,您可以添加
module . exports = { post };
或是
export const posts = [...your array...];
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。