質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Framework

Frameworkは、アプリケーションソフトを開発する際に、一般的な機能をより簡単に、より早く完了させる事を目的とした、ソフトウェアやライブラリのセットを指します。開発にフレームワークを使用する事で、追加で必要となる機能だけを開発するだけで済む為、開発効率の向上が見込めます。

REST

REST(Representational State Transfer)はwebアプリケーションの構築スタイルの一種です。HTTP GET/POSTによってリクエストを送信し、レスポンスはXMLで返されます。SOAPのようなRPCの構築と比べるとサーバからクライアントを分離することが出来る為、人気です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

571閲覧

Django Rest Frameworkで作成したAPIをReact上で呼び出したい。

yasso

総合スコア6

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Framework

Frameworkは、アプリケーションソフトを開発する際に、一般的な機能をより簡単に、より早く完了させる事を目的とした、ソフトウェアやライブラリのセットを指します。開発にフレームワークを使用する事で、追加で必要となる機能だけを開発するだけで済む為、開発効率の向上が見込めます。

REST

REST(Representational State Transfer)はwebアプリケーションの構築スタイルの一種です。HTTP GET/POSTによってリクエストを送信し、レスポンスはXMLで返されます。SOAPのようなRPCの構築と比べるとサーバからクライアントを分離することが出来る為、人気です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/03/20 10:55

前提・実現したいこと

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
です。
是非お力を貸していただければと思います。よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2021/03/20 17:25

Posts の props.data は配列なのでは。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問