Reactで、twitterのtweet一覧を表示できない

Question

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

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

参考動画を見ながら頑張っていますが、http-hook.jsが何をしているのかさっぱりで、loadedtweetsに、textが入っているらしいのですが、うまく取り出して表示することができません。

見様見真似で生半可な理解で進んでいるつけが回ってきている気がします。

何が原因でtextが表示されず、どのようにすれば解決できるのでしょうか。

tweetXXX.js

import React, {useEffect, useState} from 'react';
import { useHttpClient } from '../../shared/hooks/http-hook';

const Tweets = () => {
    const [loadedtweets, setLoadedtweets] = useState();
    const { isLoading, error, sendRequest, clearError } = useHttpClient();


    useEffect(()=>{
        const fetchTweets = async () => {
            const responseData = await sendRequest(
                `http://localhost:5000/twitter/mytweet`
            );
            setLoadedtweets(responseData.tweets);
        };
        fetchTweets();
    }, [sendRequest]);


    return(
        <div>
            {loadedtweets.map(({text})=>({text}))}
        </div>
    );
};

export default Tweets;

http-hook.js

import { useState, useCallback, useRef, useEffect } from 'react';

export const useHttpClient = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState();

  const activeHttpRequests = useRef([]);

  const sendRequest = useCallback(
    async (url, method = 'GET', body = null, headers = {}) => {
      setIsLoading(true);
      const httpAbortCtrl = new AbortController();
      activeHttpRequests.current.push(httpAbortCtrl);

      try {
        const response = await fetch(url, {
          method,
          body,
          headers,
          signal: httpAbortCtrl.signal
        });

        const responseData = await response.json();

        activeHttpRequests.current = activeHttpRequests.current.filter(
          reqCtrl => reqCtrl !== httpAbortCtrl
        );

        if (!response.ok) {
          throw new Error(responseData.message);
        }

        setIsLoading(false);
        return responseData;
      } catch (err) {
        setError(err.message);
        setIsLoading(false);
        throw err;
      }
    },
    []
  );

  const clearError = () => {
    setError(null);
  };

  useEffect(() => {
    return () => {
      // eslint-disable-next-line react-hooks/exhaustive-deps
      activeHttpRequests.current.forEach(abortCtrl => abortCtrl.abort());
    };
  }, []);

  return { isLoading, error, sendRequest, clearError };
};

なお、http://localhost:5000/twitter/mytweetにアクセス(バックエンド)して得られるjsonは、以下の形式です。
ここまでは動作しているので、react側の問題だと考えています。

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

以上になります。
足りない情報ありましたらご連絡ください。

よろしくお願いいたします。

Answer 1

tweetXXX.js を 2 箇所直したら動くと思います。

まず、TypeError: undefined is not an object (evaluating 'loadedtweets.map') というエラーが出てると思いますが、これは最初（ツイートを読み込む前）は loadedtweets には何も入ってない (undefined) からで、とりあえず return のところで次のようにチェックしてあげれば良いでしょう。

     return(
         <div>
-            {loadedtweets.map(({text})=>({text}))}
+            {loadedtweets && loadedtweets.map(({text})=>({text}))}
         </div>
     );

これでエラーはなくなっても表示は空のままだと思いますが、返ってくるデータが配列で tweets なんてキーはないからで、とりあえず useEffect を以下のようにすれば動くでしょう。（もっとも、これは API サーバー側が間違ってる気がしなくもないですが。）

     useEffect(()=>{
         const fetchTweets = async () => {
             const responseData = await sendRequest(
                 `http://localhost:5000/twitter/mytweet`
             );
-            setLoadedtweets(responseData.tweets);
+            setLoadedtweets(responseData);
         };
         fetchTweets();
     }, [sendRequest]);

ところで、「http-hook.jsが何をしているのかさっぱり」とのことですが、async/await を使った custom hook ですから初心者には相当難しいと思います。もっと簡単な教材を探した方がいいかもしれませんね。

Comments

[masaking]

アドバイスありがとうございます。
結論から言うと、おっしゃる通りに直してみたところ、ダメでした。
TypeError: Cannot read property 'map' of undefined　とエラーが出ています。

問題の切り分けのために、一度、データの配列をtweetXXX.jsにてもち、そこから出力する形に変更したところ、出力できたので、postmanでgetできるところも含めると、うまくバックエンドから情報を引き出せていないようです。どうしたものか...

並行して、簡単な教材を探してやってみようと思います。
https://www.yoheim.net/blog.php?q=20170107などでみた、fetch を使ったやり方にトライしようと思います。