React is not displaying data from express backend

I am trying to get data from a postgres database and display that in a table.

server.js

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

require("dotenv").config();
const cors = require("cors")
const db = require("./db");
// Express Application setup
const express = require("express");
const morgan = require("morgan");
const app = express();
const bodyParser = require("body-parser");
const port = process.env.PORT;
app.listen(port, () => {
console.log(`Server is UP and running and listening on port ${port}`);
})
app.use(cors());
app.use(bodyParser.json());
// HTTP request logger middleware
app.use(morgan("dev"));
// Get All Monsters
app.get('/monsters', async  (req, res) => {
const results = await db.query(`select * from monsters`, (err, results) => {
if (!err) {
console.log(results)
res.send(results.rows);
}
});
db.end;
})

<!-- end snippet -->

the server is on port 3100, and when I visit http://localhost:3100/monsters I get a good result:

[{"id":1,"image":{"type":"Buffer","data":[105,109,103,49,46,106,112,103]},"table":null,"cr":"1/2","source":"Monster Manual","type":"Humanoid","size":"Medium","alignment":"N","tags":null,"info":null,"name":"Goblin"},{"id":13,"image":null,"table":null,"cr":"1/4","source":"Monster Manual","type":"Monster","size":"Medium","alignment":"N","tags":null,"info":null,"name":"Spiderz"}]

Also works fine from Postman. The only thing I see in difference that when I run GET in Postman Morgan shows me GET /monsters 200 41.481 ms , and from the website it shows me: GET /monsters 304 3.514 ms.

The problem seems to sit somewhere in the frontend (react).

App.js:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import './App.css';
import MainComponent from './components/MainComponent';
import Info from './components/Info';
import Rules from './components/Rules';
import Rulebooks from './components/Rulebooks';
import Monsters from './components/Monsters';
import Adventures from './components/Adventures';
import Contact from './components/Contact';
import { Routes, Route } from 'react-router-dom';
import MonsterInfo from './components/MonsterInfo';
import { MonsterContextProvider } from './context/MonsterContext';
function App() {
return (
<MonsterContextProvider>
<div>
<Routes>
<Route path="/" element={<MainComponent />} />
<Route path="/info" element={<Info />} />
<Route path="/rules" element={<Rules />} />
<Route path="/rulebooks" element={<Rulebooks />} />
<Route path="/monsters" element={<Monsters />} />
{/* <Route path="/monsters/:id" element={<MonsterInfo />} /> */}
<Route path="/adventures" element={<Adventures />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
</MonsterContextProvider>
)
};
export default App;

<!-- end snippet -->

context: MonsterContext.js

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import React, { useState, createContext } from "react";
export const MonsterContext = createContext();
export const MonsterContextProvider = props => {
const [monsters, setMonsters] = useState([])
// const addMonsters = (monsters) => {
//     setMonsters([...monsters, monsters]);
// }
return (
<MonsterContext.Provider value={{ monsters: monsters, setMonsters }}>
{props.children}
</MonsterContext.Provider>
)
}

<!-- end snippet -->

Api: Monsterfinder.js

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import axios from "axios";
export default axios.create({
baseURL: "http://192.168.0.118:3100/"
});

<!-- end snippet -->

Page to display data: MonsterList.jsx

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

import "./Monsters.css";
import React, { useEffect, useContext } from 'react';
import MonsterFinder from "../apis/MonsterFinder";
import { useNavigate, Link } from "react-router-dom";
import { MonsterContext } from '../context/MonsterContext';
const MonsterList = (props) => {
const { monsters, setMonsters } = useContext(MonsterContext);
const navigate = useNavigate()
useEffect(() => {
const fetchData = async () => {
try {
const response = await MonsterFinder.get("/monsters");
setMonsters(response.data.data.monsters);
} catch (err) {}
};
fetchData();     
}, []);
return (
<div className="app-container">
<h1>Monsters</h1>
<table>
<thead>
<tr>
<th> </th>
<th>Cr</th>
<th>Name</th>
<th>Source</th>
<th>Type</th>
<th>Size</th>
<th>Alignment</th>
<th>Tag</th>
<th>Info</th>
</tr>
</thead>
<tbody>
{monsters.map((monster) => {
return (
<tr>
<td><img src={require(`../media/${monster.Image}`)} alt={monster.Name} height="25" width="25" /></td>
<td>{monster.Cr}</td>
<td>{monster.Name}</td>
<td>{monster.Source}</td>
<td>{monster.Type}</td>
<td>{monster.Size}</td>
<td>{monster.Alignment}</td>
<td>{monster.Tag}</td>
<td><button className="button"><Link className="links" to={`/monsterinfo/${monster.Name}`}>Info</Link></button></td>
</tr>
);
})}
</tbody>
</table>
</div>
)
};
export default MonsterList

<!-- end snippet -->

In server.js I console.log(results) And the console shows:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

GET /monsters 304 37.024 ms - -
Result {
command: 'SELECT',
rowCount: 2,
oid: null,
rows: [
{
id: 1,
image: <Buffer 69 6d 67 31 2e 6a 70 67>,
table: null,
cr: '1/2',
source: 'Monster Manual',
type: 'Humanoid',
size: 'Medium',
alignment: 'N',
tags: null,
info: null,
name: 'Goblin'
},
{
id: 13,
image: null,
table: null,
cr: '1/4',
source: 'Monster Manual',
type: 'Monster',
size: 'Medium',
alignment: 'N',
tags: null,
info: null,
name: 'Spiderz'
}
],
fields: [
Field {
name: 'id',
tableID: 16391,
columnID: 1,
dataTypeID: 23,
dataTypeSize: 4,
dataTypeModifier: -1,
format: 'text'
},
etc

<!-- end snippet -->

So the data is collected but when I inspect the webpage I see just the thead and get:

And you see the MonsterList Array=(0)

The problem is not in how I get the tbody data showing, it worked when I used a mock_data.json file.

First of all, i'd like to bring your attention to your "useEffect" hook, if you are in development phase, react will mount and unmount your component, making you component render twice, this behavior was implemented to better catch bugs in dev phase. learn more

I think you are getting http 304 because your component is fetching the data twice, your endpoint is sending 304 because he is seeing the same payload being requested.

You could use the useRef to solve this exact problem, like so:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// We set a ref to persist a variable between renders
const alreadyRunned = useRef(false)
useEffect(() => {
if(alreadyRunned.current == false) {
// We set the "current" property to true, to execute only once the useEffect
alreadyRunned.current = true;
// Your code here
}
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<!-- end snippet -->