【React】apiから取得した値が表示できない

Question

実現したいこと

apiから取得したDBの値が画面に表示されるようにしたいです。

発生している問題・分からないこと

画面に何も表示されていません。

エラーメッセージ

コンパイルエラー：なし
実行時エラー　　：なし
※ただし、10分くらいするとデベロッパーツールのコンソールタブに以下エラーが表示されます。
Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

該当のソースコード

aplication
├─client
│  ├─node_modules
│  ├─public
│  ├─src
│		├App.css
│		├App.js
│		├index.js
│		├reportWebVitals.js
│  ├─.gitignore
│  ├─package.json
│  ├─package-lock.json
│  ├─README.md
├─server
│  ├─node_modules
│  ├─index.js
│  ├─package.json
│  ├─package-lock.json

import React, { useState, useEffect } from "react";
import './App.css';
import Axios from "axios";

function App() {
const [categoryList, setCategoryList] = useState([]);

useEffect(() => {
  Axios.get("http://localhost:5000/api/get/dish").then((response) => {
    console.log("API Response:", response);
    setCategoryList(response.data);
    console.log(response);
  })
  .catch((error) => {
    console.error("There was an error fetching the data:", error);
  });
}, []);
  return (
    <div className="App">
    <h1>リストで表示</h1>
    <ul>
      {categoryList.map((val, index) => {
        console.log(val);
        return <li key={index}>{val.name}</li>
      })}
    </ul>
    </div>
  );
}
export default App;

const express = require('express');
const app = express();
const cors = require('cors');
const mysql = require('mysql2');

const db = mysql.createPool({
  host: 'localhost',
  user: 'mysql',
  password: 'root',
  database: 'sys',
});

app.use(cors());

app.get("/api/get/dish", (req, res) => {

const sqlSelect = "SELECT * FROM dish ORDER BY id";
db.query(sqlSelect, (err, result) => {
    res.send(result);
    });
});
app.listen(5000, () => {
    console.log('running on port 5000');
});

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

DBの接続は問題なくできていることは確認しています
以下、apiエンドポイントの結果です。

補足

◆以下のサイトを参考に実施しています。
https://qiita.com/nemutya/items/b4c606168aa5be610e1e

◆【09/02追記】
ソースコードでコンソールログに出力するようにコードを書いているのですが、
ブラウザ上でなぜかコンソールログの出力内容を確認できないです。。。

Answer 1

ググるとこんな情報ありました。

https://qiita.com/yamaki_777/items/102eb9f1667003ec4a9d

chrome の 拡張機能の影響でそのメッセージが出る可能性があるらしいですが、どうでしょうか。
ただ、このメッセージは無視でいいらしいので、画面に表示されないのは別の理由かもしれません。

ソースと添付のスクショ見て気になるのは、
return <li key={index}>{val.name}</li>
で、キー(name)が小文字ですが、スクショのJSONは
[{"ID": 1, "NAME": "ハンバーグ", ...
で、キーが大文字です。JavaScriptは大文字小文字を区別するので合わせる必要があります。

Comments

[sukiyakicool]

ご回答ありがとうございます。
試しに該当の部分を修正して、大文字にしたのですが、変わらず画面には反映されませんでした。。。