Отправка данных обратно клиенту React с сервера Node с запросом POST

Question

Очень простое приложение-счетчик, использующее React и Nodejs.На стороне клиента у меня есть компонент счетчика, который состоит из состояния подсчета и рендеринга в пользовательском интерфейсе со значением по умолчанию, равным 0, и каждый раз, когда пользователь нажимает кнопку увеличения, он запускает API запроса POST к серверу узла.Затем сервер узла обработает запрос и ответит клиенту с его результатом.Как бы я это сделал?

Клиентская часть (компонент Counter)

this.state = {
   count : 0
}

sendAPI() {
   axios.post('http://localhost:3001/increment', this.state.count)...
}

render() {
    <div>
        <button onClick = {this.sendAPI()} type="button">increment</button>
        Counter: {this.state.count}  
    </div>
}

Серверная часть (сервер экспресс)

app.post('/increment', function(req,res) {
     res.send(req.body.count + 1)
}

Как мне вернуть данные res.send () к этому.state.count "на стороне клиента?

Answer 1

state = {
   count : 0
}

sendAPI() {
   axios.post('http://localhost:3001/increment', {count: this.state.count})
       .then(res => {
               const count = res.data;
               this.setState({count: +count})
           );
}

render() {
    <div>
        <button onClick = {() => this.sendAPI()} type="button">increment</button>
        Counter: {this.state.count}  
    </div>
}

Серверная часть (экспресс-сервер)

app.post('/increment', function(req,res) {
     res.send(+req.body.count + 1)
}