### 前提・実現したいことフロントをReact、バックエンドをDjangoでブログアプリを作っています。 axiosでDjangoにて保管したデータをReactに反映させようとしています。 ### 発生している問題・エラーメッセージ ``` エラーメッセージ TypeError: Cannot read property 'map' of null ``` ### 該当のソースコード App.js ```javascript import React, { Fragment, useState, useEffect } from 'react'; import axios from 'axios'; const App = () => { const [posts, setPosts] = useState(null); useEffect(() => { axios .get('http://localhost:8000/api/posts/') .then(res=>{setPosts(res.data);}) .catch(err=>{console.log(err);}); }, []); return( //この部分でエラーが出ます。↓ {posts.map(post => (

{post.title}

{post.body}

))} ); } export default App; ``` ### 試したこと参考にしたのはこのページです。 https://www.devmem.info/web/make-react-django-blog3/ Djangoの情報がReactに渡せていないようです。 postsにnullを入れたところ同様のエラーが出ました。 ```javascript import React, { Fragment } from 'react'; const App = () => { //変更箇所↓ const posts = null return( {posts.map(post => (

{post.title}

{post.body}

))} ); } export default App; ``` postsに[]を入れたところ、白紙のページが出ました。 ```javascript import React, { Fragment } from 'react'; const App = () => { //変更箇所↓ const posts = [] return( {posts.map(post => (

{post.title}

{post.body}

))} ); } export default App; ``` ### 補足情報（FW/ツールのバージョンなど） settings.py ```python INSTALLED_APPS = [ # local app 'users.apps.UsersConfig', 'posts.apps.PostsConfig', #サードパーティアプリ 'rest_framework', 'rest_framework.authtoken', 'corsheaders', 'allauth', 'allauth.account', 'allauth.socialaccount', 'rest_auth', 'rest_auth.registration', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'django.contrib.sites' ] MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ] CORS_ORIGIN_WHITELIST = [ #'http://172.20.0.95:3000' 'http://localhost:3000' ] ``` ディレクトリ構成は ``` React/ (ルートディレクトリ) |-- config/ |-- frontend/ |-- posts/ |-- templates/ |-- users/ |-- db.sqlite3 |-- manage.py ``` です。

	@@ -1 +1 @@
1	- TypeError: Cannot read property 'map' of null
1	+ React Django　TypeError: Cannot read property 'map' of null　のエラー

質問編集履歴