从 API 获取数据后如何更改状态？

Question

constructor(props) {
        super(props);
        this.state = {
            message: ""
        };
    }

    async getData() {
        this.setState({...this.state})
        await axios.get("https://g...")
        .then(function(response) {
            console.log(response);
            this.setState({message: response.data})
        }).bind(this)
    }

    render() {
        return (
            <div>
                {this.state.message}
            </div>
        );
    }

我尝试使用此代码从 API 获取数据。但是，打印出来的消息只链接到原来的构造函数，getData()函数并没有改变状态。获取数据后应该如何改变状态？

Answer 1

你应该使用componentDidMount，并将请求数据的函数放在componentDidMount生命周期中。

对了，可以加个加载来提升用户体验:)

import React from 'react';

import "./styles.css";

const BASE_URL = 'https://api.github.com';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      message: ''
    }
  }

  componentDidMount() {
    this.getData();
  }

  async getData() {
    try {
      const result = await fetch(`${BASE_URL}/repos/facebook/react`);
      const toJson = await result.json();
      const stringify = JSON.stringify(toJson, null, 2);

      this.setState({
        message: stringify
      })
    } catch (error) {
      // ignore error.
    }
  }


  render() {
    const { message } = this.state;

    return (
      <div>
        {message}
      </div>
    )
  }
}

export default App;

Answer 2

如果您使用 'async' 和 'await'，则不必使用 then() 函数你可以写

const data = await axios.get("url")
console.log(data.data)
this.setState({message:data.data})

从 API 获取数据后如何更改状态？

How do I change a state after getting data from API?

api

get

render

setstate

reactjs