时间戳

首页 > 解决方案 > React.js useState() 没有得到任何值；

node.js - React.js useState() 没有得到任何值；

问题描述

我正在学习 React.js 并且在某个地方遇到了问题。

我正在从 localhost:4000/products 获取数据（即）

这是我的 localhost:4000/products 页面

我正在 node.js 中进行后端查询

这是页面：

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")
});

这是我的 React.js 页面：

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

状态名称未设置任何值。它没有显示任何值：

它的页面什么也没显示:(

而且我还想知道如何使 useEffect 钩子不在第一次渲染时渲染（componentWillMount），而只在最后渲染（componentDidMount）。

这是我的 res 控制台：

标签： node.jsreactjs

解决方案

首先，您需要更新setnames，因为res.data它是一个数组，所以您不能使用res.data.name：

setnames(res.data)

作为回报，您需要使用map来显示名称：

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

推荐阅读