Reactでpropsの値がundefined

Question

前提・実現したいこと

ReactとDjangoでブログを作っています。
Django REST framework で作ったcomment APIにaxiosでコメントの一覧を引っ張ってくることに成功しました。
それは全ての記事につけられたコメントであるため、目的の記事につけられたコメントを抽出しなければなりません。
comment APIではtarget_postという値が決められており、どの記事につけられたコメントなのかを示します。

if (item.target_post === this.props.articleID) return true;

これがfilterの条件です。
this.props.articleIDの値がundefinedになるためフィルターに1つもコメントが引っかかりません。

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

プログラムは全く変えていませんが、うまくいくときとうまくいかないときがあります。
comment res.dataがapiからとってきたデータで、
this.state.commentがfilterにかけて残ったデータです。
####失敗

####成功

該当のソースコード

Comment.js

import React from 'react';
import axios from 'axios';

import { Card } from 'antd';

class CommentComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      comment: {},
    }
  }



  componentDidMount() {
    console.log("this", this);
    axios.get('http://127.0.0.1:8000/api/v1/comment')
      .then(res => {
        let commentData = res.data.filter((item, index) => {
          console.log('comment res.data: ', res.data);
          console.log('this.props.articleID: ', this.props.articleID);
          if (item.target_post === this.props.articleID) return true;
        });
        this.setState({
          comment: commentData
        });
        console.log('this.state.comment: ', this.state.comment);
      })
  }

  render() {
    return (
      <div>
      <Card title=<h1>Comments</h1>>
        <p
          style={{
            fontSize: 14,
            color: 'rgba(0, 0, 0, 0.85)',
            marginBottom: 16,
            fontWeight: 500,
          }}
        >
        </p>
        <Card
          style={{ marginTop: 16 }}
          type="inner"
          title="Inner Card title"
        >
          Inner Card content
        </Card>
        <Card
          style={{ marginTop: 16 }}
          type="inner"
          title="Inner Card title"
        >
          Inner Card content
        </Card>
        <Card
          style={{ marginTop: 16 }}
          type="inner"
          title="Inner Card title"
        >
          Inner Card content
        </Card>
      </Card>
      </div>
    );
  }

}

export default CommentComponent;

ArticleDetailView.js

import React from 'react';
import axios from 'axios';

import { Card } from 'antd';
import CustomForm from '../components/Form';
import CommentComponent from '../components/Comment';

class ArticleDetail extends React.Component {

  state = {
    article: {}
  }

  componentDidMount() {
    const articleID = this.props.match.params.articleID;
    axios.get(`http://127.0.0.1:8000/api/v1/${articleID}`)
      .then(res => {
        this.setState({
          article: res.data
        });
        console.log('article res.data: ', res.data);
      })
  }

  render() {
    console.log('this.state.article.id', this.state.article.id);
    return (
      <div>
        <Card title=<h1>{this.state.article.title}</h1>>
          <p>{this.state.article.text}</p>
        </Card>
        <CommentComponent articleID={this.state.article.id}/>
        <Card title=<h1>Add New Comment</h1>>
          <CustomForm
            requestType="post"
            target_post={this.state.article.id}/>
        </Card>
      </div>
    );
  }
}

export default ArticleDetail;

試したこと

渡す値をarticle.idからarticleに変えてもダメでした。

Answer 1

こんにちは

React コンポーネントのライフサイクル図をいろいろな方が描いてますが、たとえば以下の図

• iktakahiro/react-component-lifecycle-diagram (by iktakahiro さん）

の左上の点線で囲んだ Initialization と書かれた部分を見ても分かるとおり、componentDidMount は初回の render の後に呼ばれます。

従って、ArticleDetail の初回の render が実行される時点では、this.state.article は初期値として設定された空オブジェクトのままですので、 this.state.article.id は undefined であり、

<CommentComponent articleID={this.state.article.id}/>

で渡した先の CommentComponent においても、 this.props.articleID が undefined になります。

このようなときによくやる手としては、ArticleDetail の render で、まずthis.state.article.id に妥当な値が入っているかをチェックして、入っていないときは、サーバーと通信中であることを示すローディングアイコンを返させることです。

例えばローディングアイコンのコンポーネントを Loading として作ったとして、以下のようにします。

** ArticleDetailView.js: **

import Loading from '../components/Loading'

妥当な Article ID は整数であると仮定しますと、以下のように、 render の先頭で this.state.article.id に整数が入っているかをチェックして、入っていなければローディングアイコンを返すようにします。

render() {
  // 以下の2行を追加
  if (!Number.isInteger(this.state.article.id))
    return <Loading />;

  console.log('this.state.article.id', this.state.article.id);
  return (
    <div>
      <Card title={<h1>{this.state.article.title}</h1>}>
　・・・

もし、 妥当な Article ID が1以上の数であれば、if条件は if (this.state.article.id > 0) などでもよいでしょう。

上記のようにすると、Articleを取得するAPI(GET /api/v1/${articleID})が成功で返ってくるまでの間はローディングアイコンが表示され、成功で返ってくると、再度renderが実行され、そのときは、this.state.article.id にはＡＰＩで返された Article のIDが入っているので、ローディングアイコンではなく、 <div> 以下のコンポーネントが返されます。このようにすれば、 CommentComponent がrender されるときには、必ず this.props.articleID に(undefinedではない）適正なIDの値が渡されてくることになります。

以上参考になれば幸いです。

Comments

[yk_00]

仰る通りLoadingコンポーネントを作ることで解決しました。
確かにライフサイクルの理解は曖昧でした。
自分では解決できなかったでしょう。
ありがとうございます！

[jun68ykt]

どういたしまして。解決されたようで、よかったです ????