WEBエンジニア
REACTを使ってみて躓いたとこ

環境

UI：React
API server : express
DB : mysql

やりたいこと

expressを使って、mysqlのデータを取得、
取得したデータをReactを使ってWEBに表示

躓いたこと

expressからのデータをreact側で受け取るときに、undefinedになる。

express上では、データが取得できていることは確認できている。

以下、React App.jsコード抜粋

App.js 抜粋

~~~

  const [message, setMessage] = useState('');
  useEffect(() => {
    // fetchでexpress上に作ったAPIよりデータを取ってくる
    fetch('/getData')
    .then((res) => {
      // 失敗していたらエラーを返す
      if(!res.ok){
        console.log("error");
        throw new Error('error');
      }
      // 成功していたら、取得したデータを次のthenへ
      res.json();
    })
    .then((data) => {
      // コンソールで表示　←　もちろんundefined
      console.log(data);
    })
    .catch((err) => {
      console.log(err);
    });
  }, []);

原因
fetchでデータを取得したときに、
thenでreturn を返していなかったから。

thenを｛｝で囲むときには、returnで明示的に値を返す必要があるみたい。

以下、値を取得できるコード

App.js 抜粋

~~~

  const [message, setMessage] = useState('');
  useEffect(() => {
    // fetchでexpress上に作ったAPIよりデータを取ってくる
    fetch('/getData')
    .then((res) => {
      // 失敗していたらエラーを返す
      if(!res.ok){
        console.log("error");
        throw new Error('error');
      }
      // 成功していたら、取得したデータを次のthenへ
      return res.json();　// <- ここのreturn がいる
    })
    .then((data) => {
      // コンソールで表示
      console.log(data);
    })
    .catch((err) => {
      console.log(err);
    });
  }, []);

あとがき

WEBエンジニアではあるけど、自社のPHPフレームワークを使ったシステムの開発をしているため、
JSのフレームワークや開発環境に憧れがあり、やってみました。

途中でわからんからAPIはLaravel使ったほうが早くね？
ってなりましたが、まあ遊びだしいいかと思いやってみました。
これで一応ReactでAPIデータを表示できるところまでできたので、
自分の作りたいものの学習にはなったからいいかと思っています。