Javascript 如何将数据从我的express应用程序获取到前端（位于React中）的组件？

我正在为hackathon开发一个MySQL/React/Express/Node应用程序。我有一条路径，我的合作伙伴向其发出POST请求，我能够获取JSON字段。但是，我想将这些字段发送到我的前端应用程序组件。此外，我不知道何时会发出POST请求，我希望在数据发布到我的服务器后立即将其发送到前端，以便动态更新前端。如何将JSOMN数据发送到我的前端，以及如何不断检查数据是否已发布？以下是我的express应用程序代码，后跟我的应用程序组件：

我已尝试将Express文件导入我的React组件，但这是不可能的

快递：

var epoch = null;
var accuracy = null;

app.get('/', (_req, res) => {
  res.send({"epoch": epoch, "accuracy": accuracy});
})

app.post('/', (req, res) => {
  epoch = req.body.epoch;
  accuracy = req.body.accuracy;

  console.log("Epoch: "+epoch);
     console.log("Accuracy: "+accuracy);
  res.send("");
   })

React前端应用程序组件：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route,Switch, Redirect} from 'react-router-dom'
import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Hello from './Hello.js';
import { Button, Row, Col, Container, Input, Label } from 'reactstrap';


import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem } from 'reactstrap';

class App extends Component {

constructor(props){
        super(props);

        this.state = {
                query1: '',
                query2: '',
                error: '',
                epoch: null,
                validation_accuracy: null,
                isOpen: false,
                email: '',
                accuracy: ''

        }
        this.updateInput1 = this.updateInput1.bind(this);
        this.updateInput2 = this.updateInput2.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.toggle = this.toggle.bind(this);
        this.ticker = this.ticker.bind(this);
        this.checkEpoch = this.checkEpoch.bind(this);
}

updateInput1(event){
        this.setState({query1: event.target.value});
        console.log(event.target.value);
}

updateInput2(event){
        this.setState({query2: event.target.value});
        console.log(event.target.value);
}

checkEpoch(e){
        // while(this.state.epoch == null && this.state.epoch < 100){
                fetch('http://localhost:4000/', {
                  method: 'GET',
                  headers: {
                    'Content-type': 'application/json',
                  },
                })
                  .then(res => this.setState({epoch : res.json().epoch, accuracy: res.json().accuracy}))
                  .then(res => console.log(this.state.epoch))
                  .then(res => console.log(this.state.accuracy))
                  .catch((e) => console.log(e));
        }
        // this.setState({epoch: null});

route_path = () => {
          this.props.history.push('/');
}

handleSubmit(e) {
    const data = { q1: this.state.query1, q2: this.state.query2 };
    fetch('/*remote server*/', {
      method: 'POST',
      headers: {
        'Content-type': 'application/json',
      },
      body: JSON.stringify(data),
    })
      .then(res => res.json())
      .then(res => console.log(res));
  }


render() {
        return (
        <div className="App">
        <Container>
        <Row>
          <Col><Input placeholder="Class one name." onLoad={this.ticker} className="mt-5" onChange= {this.updateInput1}/></Col>
          <Col><Input placeholder= "Class two name." onLoad={this.ticker} className="mt-5" onChange={this.updateInput2}/></Col>
        </Row>
        <Row>
        <Col></Col>
        <Col><Button className="mt-5" color='danger' size="lg" onClick={this.handleSubmit, this.checkEpoch}>Go</Button></Col>
        <Col></Col>
        </Row>
      </Container>
                <Route path="/hello" component={Hello}/>
                </div>
        );
}
}```

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch，Redirect}
从“/logo.svg”导入徽标；
导入“/App.css”；
导入'bootstrap/dist/css/bootstrap.min.css'；
从“./Hello.js”导入Hello；
从“reactstrap”导入{按钮、行、列、容器、输入、标签}；
进口{
崩溃
导航栏，
纳瓦巴托格勒，
纳瓦巴兰，
导航，
纳维坦，
导航链接，
不受控制的下降，
下拉开关，
下拉菜单，
“reactstrap”中的DropdownItem}；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
问题1:“”，
问题2:“”，
错误：“”，
纪元：空，
验证精度：空，
伊索彭：错，
电子邮件：“”，
准确性：“”
}
this.updateInput1=this.updateInput1.bind（this）；
this.updateInput2=this.updateInput2.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.toggle=this.toggle.bind（this）；
this.ticker=this.ticker.bind（this）；
this.checkEpoch=this.checkEpoch.bind（this）；
}
更新输入1（事件）{
this.setState（{query1:event.target.value}）；
日志（event.target.value）；
}
更新输入2（事件）{
this.setState（{query2:event.target.value}）；
日志（event.target.value）；
}
检查历元（e）{
//while（this.state.epoch==null&&this.state.epoch<100）{
取（'http://localhost:4000/', {
方法：“GET”，
标题：{
“内容类型”：“应用程序/json”，
},
})
.then（res=>this.setState（{epoch:res.json（）.epoch，accurity:res.json（）.accurity}））
.then（res=>console.log（this.state.epoch））
.then（res=>console.log（this.state.accurity））
.catch（（e）=>console.log（e））；
}
//this.setState（{epoch:null}）；
路由路径=（）=>{
this.props.history.push（'/'）；
}
handleSubmit（e）{
常量数据={q1:this.state.query1，q2:this.state.query2}；
获取（'/*远程服务器*/'{
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（数据），
})
.then（res=>res.json（））
.then（res=>console.log（res））；
}
render（）{
返回(
去
);
}
}```

您试图实现的目标可以通过web套接字实现

当您进行HTTP调用（例如post或get）时，客户端发出请求并接收响应，连接关闭

而在web套接字中，它们在客户机和服务器之间提供了一个持久连接，双方可以使用该连接随时开始发送数据，这正是您想要的

我建议使用 在您的应用程序中开始

让您开始使用WebSocket的文章：

---

使用express，您应该在端口中显示数据（侦听），然后在react中使用axios从节点服务器获取数据。请您解释一下“在端口中显示数据”好吗？我的express应用中有app.listen（4000）。我只是选择不在我发布的代码中显示它。非常感谢您的帮助！