React Django　TypeError: Cannot read property 'map' of null　のエラー

前提・実現したいこと

フロントをReact、バックエンドをDjangoでブログアプリを作っています。
axiosでDjangoにて保管したデータをReactに反映させようとしています。

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

エラーメッセージ
TypeError: Cannot read property 'map' of null

該当のソースコード

App.js

javascript
1import React, { Fragment, useState, useEffect } from 'react';
2import axios from 'axios';
3
4const App = () => {
5  const [posts, setPosts] = useState(null);
6
7  useEffect(() => {
8    axios
9    .get('http://localhost:8000/api/posts/')
10    .then(res=>{setPosts(res.data);})
11    .catch(err=>{console.log(err);});
12  }, []);
13
14  return(
15    <Fragment>
16//この部分でエラーが出ます。↓
17      {posts.map(post => (
18        <div key={post.id}>
19          <h1>{post.title}</h1>
20          <p>{post.body}</p>
21        </div>
22      ))}
23    </Fragment>
24  );
25}
26
27export default App;
28

試したこと

参考にしたのはこのページです。
https://www.devmem.info/web/make-react-django-blog3/

Djangoの情報がReactに渡せていないようです。

postsにnullを入れたところ同様のエラーが出ました。

javascript
1import React, { Fragment } from 'react';
2
3const App = () => {
4//変更箇所↓
5  const posts = null
6
7  return(
8    <Fragment>
9      {posts.map(post => (
10        <div key={post.id}>
11          <h1>{post.title}</h1>
12          <p>{post.body}</p>
13        </div>
14      ))}
15    </Fragment>
16  );
17}
18
19export default App;
20

postsに[]を入れたところ、白紙のページが出ました。

javascript
1import React, { Fragment } from 'react';
2
3const App = () => {
4//変更箇所↓
5  const posts = []
6
7  return(
8    <Fragment>
9      {posts.map(post => (
10        <div key={post.id}>
11          <h1>{post.title}</h1>
12          <p>{post.body}</p>
13        </div>
14      ))}
15    </Fragment>
16  );
17}
18
19export default App;
20

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

settings.py

python
1
2INSTALLED_APPS = [
3    # local app
4    'users.apps.UsersConfig', 
5    'posts.apps.PostsConfig', 
6
7    #サードパーティアプリ
8    'rest_framework',
9    'rest_framework.authtoken',
10    'corsheaders',
11    'allauth',
12    'allauth.account',
13    'allauth.socialaccount',
14    'rest_auth',
15    'rest_auth.registration',
16
17    'django.contrib.admin',
18    'django.contrib.auth',
19    'django.contrib.contenttypes',
20    'django.contrib.sessions',
21    'django.contrib.messages',
22    'django.contrib.staticfiles',
23    'django.contrib.sites'
24]
25
26MIDDLEWARE = [
27    'corsheaders.middleware.CorsMiddleware',
28    'django.middleware.common.CommonMiddleware',
29
30    'django.middleware.security.SecurityMiddleware',
31    'django.contrib.sessions.middleware.SessionMiddleware',
32    'django.middleware.common.CommonMiddleware',
33    'django.middleware.csrf.CsrfViewMiddleware',
34    'django.contrib.auth.middleware.AuthenticationMiddleware',
35    'django.contrib.messages.middleware.MessageMiddleware',
36    'django.middleware.clickjacking.XFrameOptionsMiddleware',
37]
38
39CORS_ORIGIN_WHITELIST = [
40    #'http://172.20.0.95:3000'
41    'http://localhost:3000'
42]
43

ディレクトリ構成は

React/ (ルートディレクトリ)
|-- config/
|-- frontend/
|-- posts/
|-- templates/
|-- users/
|-- db.sqlite3
|-- manage.py

です。

行動規範の内容に同意します

回答2件

自己解決

解決しました！

import React, { Fragment, useState, useEffect } from 'react';
import axios from 'axios';
const App = () => {
//変更箇所↓
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios
    .get('http://localhost:8000/api/posts/')
    .then(res=>{setPosts(res.data);})
    .catch(err=>{console.log(err);});
  }, []);
  return(
    <Fragment>
      {posts.map(post => (
        <div key={post.id}>
          <h1>{post.title}</h1>
          <p>{post.body}</p>
        </div>
      ))}
    </Fragment>
  );
}

export default App;

useStateの引数を,

nullから[]

にしました。
詳しい解説ができるかたがいらしゃいましたら、ぜひお願いいたします。

投稿2020/10/20 09:07

reiuesugi

総合スコア1