NodeJS (back-end) получает данные из POST-вызова, тогда как показать в ReactJS (front-end)?

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 или дополнительный модуль для вызова API. пожалуйста, обратитесь к этому для более подробной информации https://reactjs.org/community/data-fetching.html

https://daveceddia.com/ajax-requests-in-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-бэкэнд.Самый простой способ сделать это - использовать API Fetch, который хорошо документирован здесь .

Вам также потребуется настроить маршрут в бэкэнде своего узла, чтобы принимать запрос на выборку из внешнего интерфейса и возвращать нужные ресурсы.Документы express-async-router - это, пожалуй, лучшее место для начала.