前提・実現したいこと
railsサーバーからapiでデータを取得し、Reactで一覧を表示する。
発生している問題・エラーメッセージ
Uncaught TypeError: _this3.state.posts.map is not a function
該当のソースコード
Javascript
1import React, { Component } from 'react' 2import { withRouter } from 'react-router'; 3import axios from 'axios'; 4import Typography from '@material-ui/core/Typography' 5import Post from '../component/Post'; 6 7class Index extends Component { 8 constructor(props) { 9 super(props) 10 this.state = { 11 posts: [] 12 } 13 } 14 15 16 componentDidMount() { 17 axios 18 .get('https://6ccf1b5402214ffdb31120bbd0a35c58.vfs.cloud9.us-east-2.amazonaws.com/api/v1/posts') 19 .then((results) => { 20 console.log(results) 21 this.setState({ posts: results.data }) 22 }) 23 .catch((data) =>{ 24 console.log(data) 25 }) 26 } 27 28 render(){ 29 return( 30 <div> 31 {(() => { 32 if (this.state.posts != []) { 33 this.state.posts.map( post => { 34 return( 35 <Post title={post.created_at} name='testUser' title={post.title} content={post.content} /> 36 ) 37 }) 38 } else { 39 <Typography variant="h1" component="h2"> 40 まだなにも投稿されていません。 41 </Typography> 42 } 43 })()} 44 </div> 45 ); 46 } 47} 48 49export default Index; 50
試したこと
stack overflowにて似たような状況の質問を見つけたが、その質問の回答の通りに試しても正常に動作しなかった。
補足情報(FW/ツールのバージョンなど)
cloud9
React.js v16.8.6
###追記
回答のコメントより、改善したものを追記します。
Index
1import React, { Component } from 'react' 2import { withRouter } from 'react-router'; 3import axios from 'axios'; 4import Typography from '@material-ui/core/Typography' 5import Post from '../component/Post'; 6 7class Index extends Component { 8 constructor(props) { 9 super(props) 10 this.state = { 11 posts: [] 12 } 13 } 14 15 16 componentDidMount() { 17 axios 18 .get('https://6ccf1b5402214ffdb31120bbd0a35c58.vfs.cloud9.us-east-2.amazonaws.com/api/v1/posts') 19 .then((results) => { 20 console.log(results) 21 this.setState({ posts: results.data }) 22 }) 23 .catch((data) =>{ 24 console.log(data) 25 }) 26 } 27 28 render(){ 29 return( 30 <div> 31 {(() => { 32 if (this.state.posts.length > 0) { 33 return ( 34 this.state.posts.map( (post, i) => { 35 return( 36 <Post 37 key={i} 38 createdAt={post.created_at} 39 name='testUser' 40 title={post.title} 41 content={post.content} 42 /> 43 ) 44 }) 45 ) 46 } else { 47 return ( 48 <Typography variant="h6" component="h2"> 49 まだなにも投稿されていません。 50 </Typography> 51 ) 52 } 53 })()} 54 </div> 55 ); 56 } 57} 58 59export default Index;
Post
1import React, { Component } from 'react'; 2import { makeStyles, withStyles } from '@material-ui/core/styles'; 3import Card from '@material-ui/core/Card'; 4import CardActions from '@material-ui/core/CardActions'; 5import CardContent from '@material-ui/core/CardContent'; 6import Button from '@material-ui/core/Button'; 7import Typography from '@material-ui/core/Typography'; 8 9class Post extends Component { 10 render(){ 11 const classes = makeStyles({ 12 card: { 13 minWidth: 275, 14 }, 15 bullet: { 16 display: 'inline-block', 17 margin: '0 2px', 18 transform: 'scale(0.8)', 19 }, 20 title: { 21 fontSize: 14, 22 }, 23 pos: { 24 marginBottom: 12, 25 }, 26 }); 27 28 return ( 29 <Card className={classes.card}> 30 <CardContent> 31 <Typography className={classes.title} color="textSecondary" gutterBottom> 32 {this.props.createdAt} 33 </Typography> 34 <Typography variant="h5" component="h2"> 35 {this.props.name} 36 </Typography> 37 <Typography className={classes.pos} color="textSecondary"> 38 {this.props.title} 39 </Typography> 40 <Typography variant="body2" component="p"> 41 {this.props.content} 42 </Typography> 43 </CardContent> 44 <CardActions> 45 <Button size="small">Learn More...</Button> 46 </CardActions> 47 </Card> 48 ); 49 } 50} 51 52export default Post;
回答2件
あなたの回答
tips
プレビュー