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

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

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

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

Framework

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

REST

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

React.js

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

受付中

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

yasso
cokk

総合スコア6

Django

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

Framework

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

REST

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

React.js

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

0回答

0リアクション

0クリップ

371閲覧

投稿2021/03/20 10:55

前提・実現したいこと

DjangoとReact.jsを使い、簡単な投稿アプリを練習で作っています。

発生している問題・エラーメッセージ

Django REST frameworkでAPIを作成することは成功し、Reactのサーバー上でconsole上にはデータが表示されるのですが、呼び出し方がわからずに困っています。初歩的なところで申し訳ないですがお力を貸していただきたいです。

###実現したいこと
画像のようにAPI上のデータであるnameとcontentを画像のように表示したいと思っております。
イメージ説明

該当のソースコード

こちらがDjango REST frameworkのデータです。
![イメージ説明]

こちらがReactの親コンポーネントです。

import

import axios from 'axios'; // import Posts from './Posts'; import React, {useState,useEffect} from 'react'; import './Posts.css'; // import Avatar from '@material-ui/core/Avatar'; // import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; // import { faHeart } from '@fortawesome/free-solid-svg-icons'; import Posts from './Posts'; class Post extends React.Component { constructor(props) { super(props); this.state = { articles: [] } } componentDidMount() { axios.get('http://127.0.0.1:8000/api/') .then( res => { this.setState({ articles: res.data, }); console.log(res.data); }) } render() { return( <div className="app"> <div className="app_header"> <img className="app_headerImage" src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png" alt="" /> </div> <div className="app_posts"> <Posts data={this.state.articles}/> </div> </div> ) } } export default Post;

こちらがReactの子コンポーネントです。

import

import './Posts.css'; import Avatar from '@material-ui/core/Avatar'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faHeart } from '@fortawesome/free-solid-svg-icons'; const Posts = props => { return( <div className="post"> <div className="post_header"> <Avatar className="post_avatar" alt="Gafe" src="/static/images/avatar/1.jpg" /> <h3>{props.data.name}</h3> </div> {/* <img className="post_image" src="https://pbs.twimg.com/media/EefjHDXU0AEqPCI.jpg" alt=""/> */} <div className="icon"> <FontAwesomeIcon icon={faHeart} size="lg" style={{color: "FF3366"}} /> <div className="likedby"> <p> Liked by {/* {likedname.map((like) => ( <strong className="likednames">kiki</strong> ))} */} </p> </div> </div> <h4 className="post_text"><strong className="strongtext">{props.data.name}</strong>{props.data.content}</h4> <div className="post_comments" > {/* {comments.map((comment) => ( <p> <strong>{comment.username}</strong> {comment.text} </p> ))} */} </div> {/* {user &&( <form className="post_commentBox"> <input className="post_input" type="text" placeholder="Add a comment..." value={comment} onChange = {(e) => setComment(e.target.value)} /> <button className="post_button" disable={!comment} type="submit" onClick={postComment} > Post </button> </form> )} */} </div> ) } export default Posts;

試したこと

上記のコードで試すと、このようになります。
イメージ説明
子コンポーネントで呼び出す際に、{this.props.data.name}や{this.props.data[0].name}などを試しましたがエラーがでてしまい、解決できませんでした。

補足情報(FW/ツールのバージョンなど)

バージョン等は、

macOS
Python 2.7.16
です。
是非お力を貸していただければと思います。よろしくお願いいたします。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

hoshi-takanori

2021/03/20 17:25

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

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

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Django

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

Framework

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

REST

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

React.js

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