Как визуализировать состояние в ReactJS?

Question

Я backend разработчик Python. Но мне нужно сделать простой front на React. Я посылаю request, я получаю response, но я не могу получить state.

class AppsList extends Component {
        state = {
            apps: []
        }

    componentDidMount() {
        axios.get('/apps')
          .then(function (response) {
            console.log(response);
            this.setState({
                apps: response.data
            })
          })
          .catch(function (error) {
            console.log(error);
          });
    }

    render() {
        return (
            <div>
                aaa
                <p>{this.state.apps}</p>
                aaa
            </div>
        );
     }
}

Ответ

Answer 1

Попробуйте определить «это» из обещания и отобразить на this.state.apps вот так:

class AppsList extends Component {
        state = {
            apps: []
        }

    componentDidMount() {
        const {setState} = this;
        axios.get('/apps')
          .then(function (response) {
            console.log(response);
            setState({
                apps: response.data
            })
          })
          .catch(function (error) {
            console.log(error);
          });
    }

    render() {
        return (
            <div>
                aaa
                <div>
                  {this.state.apps.map((app) => {
                    return (<p key={app.id}>{app.name}</p>)
                  })}
                </div>
                aaa
            </div>
        );
     }
}

Answer 2

Обратный вызов не в обозначении стрелки.

Вы можете просто сделать:

.then(response => this.setState({ apps: response.data }))

Answer 3

Вы можете сделать:

class AppsList extends Component {
    state = {
        apps: []
    }

componentDidMount() {
    axios.get('/apps')
      .then(function (response) {
        console.log(response);
        this.setState({
            apps: response.data
        })
      })
      .catch(function (error) {
        console.log(error);
      });
}

render() {
    return (
        <div>
            aaa
            <p>{this.state.apps.map(elem => <div>{elem.id} {elem.name}</div>)}</p>
            aaa
        </div>
    );
 }
}