Question

我是NodeJS / ReactJS的新手。我有一个NodeJS后端，该后端从外部资源接收JSON POST。我可以在express-async-router请求中在控制台中显示数据。

这是我的NodeJS后端

const AsyncRouter = require("express-async-router").AsyncRouter;
const router = AsyncRouter();
const jsonParser = require("body-parser").json({limit: "500kb"});
const validate = require("express-validation");
const schema = require("./schema");

router.use(jsonParser);

router.post("/exist", async (req, res) => {
  // console.log("Request");
  // console.log(req);
  return res.status(200).json({
    body: req.body,
    msg: "Ciao"
  });
});

module.exports = router;

此代码在控制台中显示POST请求正文。

我会在ReactJS前端中显示这些数据，但是我不知道该怎么做。

实现我的目标的最佳实践是什么？

谢谢

Answer 1

您可以使用Fetch，Axios或superagent模块进行api调用。请参阅此以获取更多详细信息 https://reactjs.org/community/data-fetching.html

https://daveceddia.com/ajax-requests-in-react/

下面是一个示例React组件，用于在按钮单击事件上进行HTTP调用

import axios from 'axios'

class App extends Component {
  constructor () {
    super()
    this.state = {
      username: ''
    }

    this.handleClick = this.handleClick.bind(this)
  }

  handleClick () {
    axios.get('https://api.github.com/users/sandeepp2016')
      .then(response => this.setState({username: response.data.name}))
  }

  render () {
    return (
      <div className='button__container'>
        <button className='button' onClick={this.handleClick}>Click Me</button>
        <p>{this.state.username}</p>
      </div>
    )
  }
}
export default App

Answer 2

您将需要React前端来查询Node后端。执行此操作的最简单方法是使用Fetch API，该文件的文档here有据可查。

您还需要在Node后端中设置一条路由，以接受来自前端的提取请求并返回所需的资源。 express-async-router文档可能是最好的起点。

NodeJS（后端）从POST调用接收数据，然后如何在ReactJS（前端）中显示？

2 个答案: