Node.js 如何在reactjs中使用axios通过api从数据库获取数据？

我已经用postgresql数据库在reactjs和nodejs中开发了应用程序，当我从AxiosTable调用api时。js文件成功地从表中获取数据并显示在控制台中，但当我尝试在表中显示时，它不起作用，所以请告诉我我这里做错了什么

server.js

    var restify=require('restify')
    const {empdetails} = require('./Function');
    var server=restify.createServer() //server created

    
    
    server.get('/empdetails',empdetails)
    
    server.listen(8080, function(){
        console.log("server started...")
    })

    import React, { Component } from 'react'
    import axios from 'axios'
    export class AxiosTable extends Component {
        state={
            persons:[]
        }
        componentDidMount(){
            axios.get('http://localhost:8080/empdetails')
          .then(res => {
            const persons = res.data;
            this.setState({ persons });
          })
        }
        render() {
            return (
                <div className="App">
                <div className="left">
                <table className="table table-hover table-dark">
                 <tr>
                   <th>ID</th>
                   <th>Name</th>
                   <th>Email</th>
                   
                 </tr>
                 { this.state.persons.map(person => 
                   <tr>
                     <td>{person.id}</td>
                     <td>{person.name}</td>
                     <td>{person.email}</td>
                     
                     
                     </tr>
                   )}
                 </table>
               </div>    </div>
            )
        }
    }
    
    export default AxiosTable

AxiosTable.js

    var restify=require('restify')
    const {empdetails} = require('./Function');
    var server=restify.createServer() //server created

    
    
    server.get('/empdetails',empdetails)
    
    server.listen(8080, function(){
        console.log("server started...")
    })

    import React, { Component } from 'react'
    import axios from 'axios'
    export class AxiosTable extends Component {
        state={
            persons:[]
        }
        componentDidMount(){
            axios.get('http://localhost:8080/empdetails')
          .then(res => {
            const persons = res.data;
            this.setState({ persons });
          })
        }
        render() {
            return (
                <div className="App">
                <div className="left">
                <table className="table table-hover table-dark">
                 <tr>
                   <th>ID</th>
                   <th>Name</th>
                   <th>Email</th>
                   
                 </tr>
                 { this.state.persons.map(person => 
                   <tr>
                     <td>{person.id}</td>
                     <td>{person.name}</td>
                     <td>{person.email}</td>
                     
                     
                     </tr>
                   )}
                 </table>
               </div>    </div>
            )
        }
    }
    
    export default AxiosTable

试试这个

 componentDidMount(){
            axios.get('http://localhost:8080/empdetails')
          .then(res => {
            const persons = res.data;
            this.setState(prevState => { persons: [...prevState.persons, persons] });
          })
        }

试试这个

 componentDidMount(){
            axios.get('http://localhost:8080/empdetails')
          .then(res => {
            const persons = res.data;
            this.setState(prevState => { persons: [...prevState.persons, persons] });
          })
        }

---

看起来，您的后端实际上没有返回任何数据

试试像这样的东西

function empdetails(req, res, next) {
  connection.sync().then(() => {
    Demo.findAll().then((demos) => {
      console.log(demos);
      res.send(demos);  // <-- This is the important bit! :)
    });
  });
}

功能详细信息（请求、恢复、下一步）{
connection.sync（）。然后（（）=>{
Demo.findAll（）.then（（demos）=>{
console.log（演示）；
res.send（demos）；//看起来，您的后端实际上没有返回任何数据

试试像这样的东西

function empdetails(req, res, next) {
  connection.sync().then(() => {
    Demo.findAll().then((demos) => {
      console.log(demos);
      res.send(demos);  // <-- This is the important bit! :)
    });
  });
}

功能详细信息（请求、恢复、下一步）{
connection.sync（）。然后（（）=>{
Demo.findAll（）.then（（demos）=>{
console.log（演示）；
res.send（demos）；//在渲染函数中的
return
之前添加
console.log（this.state）；
并查看浏览器的开发人员控制台以查看试图渲染的状态。它显示{persons:Array（0）}正确。这意味着表中没有要渲染的人员：）但是，当我运行这个AxiosTable.js时，来自数据库的时间数据显示在后端代码控制台中，您还可以在componentDidMountAdd
console.log（this.state）中的setState之前运行console.log（persons）吗
在渲染函数中返回
之前，在浏览器的开发人员控制台中查看试图渲染的状态。它正确显示{persons:Array（0）}。这意味着表中没有要渲染的人员：）但是，当我运行这个AxiosTable.js时，数据库中的时间数据显示在后端代码控制台中，您还可以在ComponentDidMount中的setState之前控制台.log（persons）吗？您超越了状态，因此您必须使用spread操作符来获取实际状态，并添加新的状态。希望它可以工作。setState（prevState=>{persons:[…prevState.persons，persons]}）；应为赋值或函数调用，但看到的却是表达式您超越了状态，因此您必须使用spread运算符获取实际状态，并添加新状态。希望它能工作this.setState（prevState=>{persons:[…prevState.persons，persons]}）；应为赋值或函数调用，但却看到了表达式。此表达式在后端页面（当function.js执行时）上发送数据。我不明白您的意思。您的问题是，您原来的
empdetails
函数实际上并没有发送它从数据库检索到的数据；而是发送。此表达式在后端页面上发送数据（当function.js执行时）您的问题是，您原来的
empdetails
函数实际上并没有发送它从数据库检索到的数据，而是发送。