Как обновить компонент?

Question

[Moro Zota]

api node:

var express = require('express');
var router = express.Router();

var ch = 0
router.post('/', function(req, res) {
  ch += 1
  res.json({
    ch
  })
})

router.get('/c', function(req, res, next) {
  res.json(
    ch
  )
})

module.exports = router;

компонент react:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    state = {
        count: []
    }

    componentDidMount() {
        fetch('/users/c')
            .then(res => res.json())
            .then(count => this.setState({ count }));
    }

    render() {
        return (
            <div>
                {this.state.count}
                <button onClick={this.add}>add</button>
            </div>
        )
    }
    add = () => {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/users/');
        xhr.send();
    }
}

export default App;

получаю нолик с сервера и отображаю. далее при нажатии на кнопку `add`, дёргаю запрос POST, что бы прибавить единичку. Единичка прибавляется, но что бы отобразилось, нужно обновить страницу. Наверно надо, что то с setState сдедать. но не пойму что

Comments

[Yustas Alexu]

add = () => {
Так делать не рекомендую. Тестировать такой метод будет тяжело.

[Moro Zota]

Yustas Alexu, а как тогда делать ?

[Yustas Alexu]

Moro Zota, Поставить Legacy decorator plugin и autobind-decorator и делать так:

import autobind from 'autobind-decorator';

@autobind
class App extends Component {

Answer 1

[Антон Спирин]

add = () => {
  fetch('/users/', { method: 'POST' })
    .then(res => res.json())
    .then(count => this.setState({ count }));
};