如何在 ReactJS 中渲染状态？

Question

我是一名 backend Python 开发人员。但是我需要在 React 上做一个简单的 front。我发了一个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"，并像这样在 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>
    );
 }
}

如何在 ReactJS 中渲染状态？

How to render state in ReactJS?

reactjs

axios

react-state