前提・実現したいこと
ブログを作っています。
Reactのaxiosを使ってDjango REST frameworkで作ったAPIにアクセスしたい。
axiosでAPIからgetしてくるプログラムをcomponentDidMountの中に書いたのですが、呼び出されていないようです。
componentDidMountのconsole.logが動作していないことからAPIを呼び出しの前の段階であるとわかります。
こちらの動画を参考にしました。
35:47付近
発生している問題
該当のソースコード
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
回答1件
あなたの回答
tips
プレビュー