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

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

新規登録して質問してみよう
ただいま回答率
85.50%
docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Django

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

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

React.js

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

Q&A

解決済

1回答

999閲覧

ReactのプロジェクトでcomponentDidMountが呼び出されない

yk_00

総合スコア15

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Django

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

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

React.js

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

0グッド

0クリップ

投稿2019/07/19 06:48

前提・実現したいこと

ブログを作っています。
Reactのaxiosを使ってDjango REST frameworkで作ったAPIにアクセスしたい。
axiosでAPIからgetしてくるプログラムをcomponentDidMountの中に書いたのですが、呼び出されていないようです。
componentDidMountのconsole.logが動作していないことからAPIを呼び出しの前の段階であるとわかります。

こちらの動画を参考にしました。
35:47付近

発生している問題

log

terminal

api

該当のソースコード

js

1import React from 'react'; 2import Articles from '../components/Article'; 3import axios from 'axios'; 4 5const listData = []; 6for (let i = 0; i < 23; i++) { 7 listData.push({ 8 href: 'http://ant.design', 9 title: `ant design part ${i}`, 10 avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', 11 description: 12 'Ant Design, a design language for background applications, is refined by Ant UED Team.', 13 content: 14 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.', 15 }); 16} 17 18class ArticleList extends React.Component { 19 20 state = { 21 articles: [] 22 } 23 24 componentDidMounnt() { 25 console.log("test");//ログ出力できていない 26 axios.get('http://127.0.0.1:8000/api/v1/') 27 .then(res => { 28 this.setState({ 29 articles: res.data 30 }); 31 console.log(res.data);//ログ出力できていない 32 }) 33 } 34 35 render() { 36 console.log("this.state.articles: ", this.state.articles)//ログ出力できている 37 return ( 38 <Articles data = {listData}/> 39 ); 40 } 41} 42 43export default ArticleList; 44

試したこと

ここを

js

1state = { 2 articles: [] 3}

このように変えたが解消せず

js

1 constructor(){ 2 super(); 3 this.state = { 4 articles: [] 5 } 6 }

補足情報

Ubuntu18.04.2
React
Django2
axios
docker-compose
django-cors-headers

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

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

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

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

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

YukiYamashina

2019/07/19 07:04

componentDidMounnt => componentDidMount のタイポを修正しても呼び出されませんか?
yk_00

2019/07/19 09:47

おっしゃる通りでした。 こんなミスに気付かなかったとは我ながら呆れます。 ありがとうございます。
guest

回答1

0

ベストアンサー

単純なスペルミスです。componentDidMounntになっています(nが1つ多いです)。

投稿2019/07/19 07:02

maisumakun

総合スコア145121

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

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

yk_00

2019/07/19 09:46

なんということか…何日も頭を痛めて考えたというのに。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問