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

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

ただいまの
回答率

88.34%

【再トライ】Reactで、twitterのtweet一覧を表示できない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 428

masaking

score 30

以前の質問

いつも皆さんに助けていただいてます。ありがとうございます。

expressで作ったapiサーバーにて、取得した自分のツイートのtextを、reactで表示できずに悩んでいます。

前回頂いたアドバイスを元に、より簡単なやり方として、fetchを使ったやり方に挑戦しています。

お手本公式を参考に、tweet一覧を出力しようとしたところ、エラーは無くなりましたが、stateのtweets: []が空欄のままのため、何も出力されません。

postmanで確認したところ、http://localhost:5000/twitter/mytweetにアクセスした際に、

[
    {
        "text": "試しにzaraのスニーカー履いたらベストサイズだった。ワンちゃんしかない。"
    },
    {
        "text": "今年も無事入院コースでした"
    },
(中略)
]

とはgetできています。

なぜ配列が空欄のままなのでしょうか。
また、どのように直せば、指定の配列が出てくるでしょうか。

import React from 'react';

class Tweets extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            tweets:[]
        };
        this.loadAjax = this.loadAjax.bind(this);
    }

    async loadAjax() {
        try {
            const res = await fetch("http://localhost:5000/twitter/mytweet");
            const json = await res.json();
            return this.setState({
                tweets: json,
            });
        }
        catch (err) {
            console.error(err);
        }
    }

    render(){
        const tweets = this.state.tweets.map((e)=><li>{e.text}</li>);
        return(
            <ul>
                {tweets}
            </ul>
        )
    } 
}


export default Tweets;

初歩的かとは思いますが、何卒お力添えよろしくお願いいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

loadAjax を呼び出す必要があるのでは。あと、メソッドを bind する意味はご存知でしょうか?
参考: async/await 入門(JavaScript) - Qiita
参考: ReactJS入門@ES6:コンポーネント編 - Qiita

     constructor(props){
         super(props);
         this.state = {
             tweets:[]
         };
-        this.loadAjax = this.loadAjax.bind(this);
+        this.loadAjax();
     }

それから、setState の戻り値は void なので、return はなくてもいい気がします。
参考: await vs return vs return await - JakeArchibald.com

     async loadAjax() {
         try {
             const res = await fetch("http://hoshi-mbpr13.local:3000/tweets.json");
             const json = await res.json();
-            return this.setState({
+            this.setState({
                 tweets: json,
             });
         }

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/04/03 19:30

    ご丁寧にリンク付きで回答していただいてありがとうございます。資料も拝見して、自分なりにもう一度調べました。
    おっしゃる通り、asyncとawaitがいまいち理解できていないです。
    特に、非同期通信しているのに、awaitで待つ、と言うところがわからず、だったら最初から同期通信で良いのではないのか?と思ってしまいます。
    とりあえずDBにアクセスするときに使うのかな、ぐらいで、具体的に何をするのにpromiseをする必要があるのか、ヒントなどありましたら伺いたいです。

    今回の問題については、コードを修正した後も表示されず、悶々としている中、https://s8a.jp/node-js-express-http-options
    に出会い、リクエストのヘッダーに書く情報がないことが原因だとわかりました。
    僕が全く予想していないところだったので、学びになりました。
    重ねて、ありがとうございます!!

    キャンセル

  • 2020/04/03 20:09

    JavaScript はシングルスレッドなので、同期通信だとサーバーからお返事が返ってくるまで Web ページの動きが止まってしまい、プログレスバーを出すこともできないし、キャンセルボタンも押せないという状態になります。また、サーバーでも DB アクセスなどに時間がかかるとその間他のリクエストが止まってしまいます。そのために非同期通信が必要になります。

    あと、CORS はうまくいかないと気が狂いそうになりますね。React の質問だと思って気づかずにスルーしてしまってごめんなさい。
    https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

    キャンセル

  • 2020/04/05 16:26

    ご丁寧にありがとうございます。
    リンクは僕には難しいところもあるのですが、しっかり読みます。

    非同期通信については、リクエストを止めないためにしているのに、awaitすると結局止まってしまうので、それだったら同期通信と変わらなくないか?
    という疑問です。
    同期通信とawaitは全く別物なのかもしれませんが、何が違うのかが僕にはわからないのです。

    キャンセル

  • 2020/04/06 09:37

    await を使うと、コードの見た目上は同期的に結果を待つように見えますが、実際の動作は非同期になります。await でいったん処理を中断して、結果が返ってきてから続きを再開します。その間、他の処理を行うことができます。

    キャンセル

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

  • ただいまの回答率 88.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る