React.js useState() is not getting any values;

Question

I am learning React.js and got problem in a place.

I am fetching data from localhost:4000/products (i.e)

And I am doing the backend query in node.js

Here is the page:

const express = require('express');
const app = express();
const cors = require("cors");
const mysql = require("mysql");
app.use(cors());

const selectallquery = "SELECT * FROM users";

const db = mysql.createPool({
    host: "localhost",
    user: "root",
    password: "Sakthi@1234",
    database: "reactSql",
});



app.get("/",(req,res)=> {
    res.send('Hello Sakthi')
});

app.get("/products/add", (req,res)=> {
    const { name } = req.query;
    console.log(name);
    const insertquery = `INSERT INTO users (name) VALUES ('${name}')`;
    db.query(insertquery, (err,result)=> {
        if(err){
            return res.send(err)
        }
        else{
            return res.send("Successfully added...`")
        }
    });
});

app.get("/products", (req,res)=> {
    db.query(selectallquery, (err,result)=> {
        if (err){
            return res.send(err)
        }
        else{
            return res.send(result)
        }
    });

});

app.listen(4000,()=> {
    console.log("Running on server 4000")
});

And here is my React.js page:

import React, { useState, useEffect } from 'react'
import axios  from "axios";


function Login() {
    const [names, setnames] = useState([])

    useEffect(()=> {
    axios.get("http://localhost:4000/products")
    .then(res => {
        
    
        if (res !== ""){
           
            setnames([...names,res.data.name])
             
           
        }
        
    })
    
    .catch(err => {
        console.log(err)
    })
},[])



return (
    <div>
        {
            names
        }
    </div>
)
}

export default Login

The state names is not set with any value. And it is not showing any values:

Its the page showing nothing :(

And Also i want to know how to make the useEffect hook not to render on first render(componentWillMount) and only to render at last(componentDidMount).

This is my console of res:

data.name is undefine, right? May you should map array obj to arr names — Hồng Phúc, May 11 '21 at 08:31

Viet · Answer 1 · 2021-05-11T08:51:19.083

1

First, you need to update setnames because res.data is an array so you can not use res.data.name:

setnames(res.data)

And in return, you need to use map to show name:

{names.map((item) => (
    <p key={item.id}>{item.name}</p>
  ))}

edited May 11 '21 at 08:51

answered May 11 '21 at 08:34

Viet

12,133
2
15
21

Sir, after updating the setnames with res.data while consoling it return only an empty array. – Sakthivel Sakthivel May 11 '21 at 08:40
No issues sir :). It also returns an empty array but when we use `names` as dependency, rather than the first render it returns the array sir, but it doesn't while the first rendering. – Sakthivel Sakthivel May 11 '21 at 08:57
I think this is the case where you want to use async for fetching in useEffect and only then trying to get anything back. – Malakai May 11 '21 at 09:03
How to get that effect sir? – Sakthivel Sakthivel May 11 '21 at 09:04

score 0 · Accepted Answer · answered May 11 '21 at 09:44

0

res.data is an array, so if you want to only keep names, you need to map on it to only store names to your state

setnames(names => [...names, ...res.data.map(({name}) => name)])

answered May 11 '21 at 09:44

dbuchet

1,561
1
5
7

score -1 · Answer 3 · answered May 11 '21 at 08:36

-1

You can use useRef to set the node not to render at the first time.

Make React useEffect hook not run on initial render

answered May 11 '21 at 08:36

Tommy Tang

62
3

React.js useState() is not getting any values;

3 Answers3