javascript - NodeJS(后端)从POST调用接收数据然后如何在ReactJS(前端)中显示？

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