如何将唯一标识符从我的 express 后端服务器传递到我的前端 reactjs 以显示在我的 web 应用程序中？

Question

This is my server side index.js.

const express = require("express");
const app = express();
const cors = require("cors");
const pool = require("./db");

app.use(cors());
app.use(express.json()); 

//getting all species
app.get('/species', async (req, res) => {
  try {
    const allspecies = await pool.query("SELECT * FROM speciesdata");
    res.json(allspecies.rows);
    console.log(allspecies.rows)

  } catch (err) {
    console.log(err.message)
  }
})

//getting one species
app.get("/species/:id", async (req, res) => {
  try {
    const {id} = req.params;
    const families = await pool.query("SELECT * FROM speciesdata WHERE id = $1", [id]);
    res.json(families.rows);  
    console.log(families)
    
  } catch (err) {
    console.log(err.message)
  }
})



app.listen(5000, () => {
  console.log("server has started on port 5000")
})

In the server side, my query for getting one species is working as on my localhost:5000, i can view my query results. When console log req.params i got {id: 1} if my url is http://localhost:5000/species/1 and json file displayed is:

[{"id":1,"name":"American Robin","description":"Widespread, common, and conspicuous, these medium-size birds can be found in every state in the Lower 48, every Canadian province, and Alaska. They are easy to spot with their rusty orange bellies and gray backs. Often seen running upright across lawns and meadows while foraging for worms, robins can be found from cities and towns to parks and forests, where their rich, throaty songs provide a constant soundtrack to our daily lives.","img":"https://nas-national-prod.s3.amazonaws.com/aud_gbbc-2016_american-robin_32533_kk_ca_photo-donald_metzner.jpg"}]

This is my frontend reactjs application.

function SingleSpeciesPage({match, families}) {

  console.log(families)

  useEffect(()=> {
    const getFamily = async() => {
      try {
        const response = await fetch(`http://localhost:5000/species/${families.id}`)
        const jsonData = await response.json();
  
      } catch (err) {
        console.log(err)
      }
    }
    getFamily();
  })

On my front end side, I am trying to fetch a single species and render that species on my website application by passing the families as props so that the local server can fetch the data using the id given which i named it here as families . Upon console log of families , it return me undefined . And my catch error message is also printed out, TypeError: Cannot read property 'id' of undefined .

This is the router i used in react.

import React from 'react';
import './App.css';
import HomePage from './pages/HomePage';
import { BrowserRouter as Switch, Router, Route } from "react-router-dom";
import  createBrowserHistory from 'history/createBrowserHistory';
import SingleSpeciesPage from './pages/SingleSpeciesPage';
import SingleBird from './pages/SingleBird';

const customHistory = createBrowserHistory();

function App() {
  return (
    <Router history={customHistory}>
      <Switch>

        <Route exact path='/'>
          <HomePage/>
        </Route>

        {/* Only when u use this format component={} then the params can be pass down */}
        <Route exact path ='/species/:familyId' component={SingleSpeciesPage}/>
        
      </Switch>
    </Router>
  );
}

export default App;

My conclusion was that my localhost3000 is not fetching data from my localhost5000. This is my first time dealing with a backend on my frontend so if my question is poorly phrased, please understand. Thanks in advance!

Answer 1

You're passing wrong props name in React Component.

The families you're using is not match in any props in Frontend.

So take a look at props and you'll realise what happen

function SingleSpeciesPage(props) {

  console.log(props) 

  useEffect(()=> {
    const getFamily = async() => {
      try {
        const response = await fetch(`http://localhost:5000/species/${props.match.params.familyId}`)
        const jsonData = await response.json();
  
      } catch (err) {
        console.log(err)
      }
    }
    getFamily();
  })

And your page should able to access via localhost:3000/species/1