前提・実現したいこと
DjangoとReact.jsを使い、簡単な投稿アプリを練習で作っています。
発生している問題・エラーメッセージ
Django REST frameworkでAPIを作成することは成功し、Reactのサーバー上でconsole上にはデータが表示されるのですが、呼び出し方がわからずに困っています。初歩的なところで申し訳ないですがお力を貸していただきたいです。
###実現したいこと
画像のようにAPI上のデータであるnameとcontentを画像のように表示したいと思っております。
該当のソースコード
こちらがDjango REST frameworkのデータです。
![]
こちらがReactの親コンポーネントです。
import
1import axios from 'axios'; 2// import Posts from './Posts'; 3import React, {useState,useEffect} from 'react'; 4import './Posts.css'; 5// import Avatar from '@material-ui/core/Avatar'; 6// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 7// import { faHeart } from '@fortawesome/free-solid-svg-icons'; 8import Posts from './Posts'; 9 10class Post extends React.Component { 11 constructor(props) { 12 super(props); 13 this.state = { 14 articles: [] 15 } 16 } 17 18 componentDidMount() { 19 axios.get('http://127.0.0.1:8000/api/') 20 .then( res => { 21 this.setState({ 22 articles: res.data, 23 24 }); 25 console.log(res.data); 26 27 }) 28 } 29 30 31 32 render() { 33 return( 34 <div className="app"> 35 <div className="app_header"> 36 <img 37 className="app_headerImage" 38 src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png" 39 alt="" 40 /> 41 </div> 42 <div className="app_posts"> 43 <Posts data={this.state.articles}/> 44 </div> 45 </div> 46 47 48 ) 49 } 50} 51 52export default Post; 53 54 55
こちらがReactの子コンポーネントです。
import
1import './Posts.css'; 2import Avatar from '@material-ui/core/Avatar'; 3import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 4import { faHeart } from '@fortawesome/free-solid-svg-icons'; 5 6 7const Posts = props => { 8 9 return( 10 <div className="post"> 11 <div className="post_header"> 12 <Avatar 13 className="post_avatar" 14 alt="Gafe" 15 src="/static/images/avatar/1.jpg" 16 /> 17 <h3>{props.data.name}</h3> 18 </div> 19 20 {/* <img className="post_image" src="https://pbs.twimg.com/media/EefjHDXU0AEqPCI.jpg" alt=""/> */} 21 22 23 <div className="icon"> 24 25 <FontAwesomeIcon icon={faHeart} size="lg" style={{color: "FF3366"}} /> 26 27 <div className="likedby"> 28 <p> 29 Liked by 30 {/* {likedname.map((like) => ( 31 <strong className="likednames">kiki</strong> 32 ))} */} 33 </p> 34 </div> 35 </div> 36 37 <h4 className="post_text"><strong className="strongtext">{props.data.name}</strong>{props.data.content}</h4> 38 39 40 <div className="post_comments" > 41 {/* {comments.map((comment) => ( 42 <p> 43 <strong>{comment.username}</strong> {comment.text} 44 </p> 45 ))} */} 46 </div> 47 48 49 {/* {user &&( 50 <form className="post_commentBox"> 51 <input 52 className="post_input" 53 type="text" 54 placeholder="Add a comment..." 55 value={comment} 56 onChange = {(e) => setComment(e.target.value)} 57 /> 58 <button 59 className="post_button" 60 disable={!comment} 61 type="submit" 62 onClick={postComment} 63 > 64 Post 65 </button> 66 </form> 67 )} 68 */} 69 </div> 70 71 ) 72 73} 74 75export default Posts; 76
試したこと
上記のコードで試すと、このようになります。
子コンポーネントで呼び出す際に、{this.props.data.name}や{this.props.data[0].name}などを試しましたがエラーがでてしまい、解決できませんでした。
補足情報(FW/ツールのバージョンなど)
バージョン等は、
macOS
Python 2.7.16
です。
是非お力を貸していただければと思います。よろしくお願いいたします。
あなたの回答
tips
プレビュー