使用变量在上一个请求中设置状态来发出axios请求

Question

项目问题

• 我在使用设置的状态时遇到了问题，而不是在初始状态下使用的值为空。

说明

• 我正在发出axios请求，并使用响应来设置状态。
• 我正在发出另一个axios请求，该请求使用的参数只有在发出第一个请求后才能获得。
• 当我尝试引用第二个请求中设置的状态时，它没有使用设置状态，而是指向初始状态。
• 因此使请求失败
• 来自React开发工具

  

国家帐户编号：47228906名称：“ Senpai My Guy”召唤者等级：127

代码段

初始状态

---

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      name: '',
      summonerLevel: '',
      accountId: 0
    }
  }

第一个请求

---

componentDidMount () {
    var api_key = '';

    axios
      .get(
        `https://na1.api.riotgames.com/lol/summoner/v3/summoners/by-name/Senpai%20My%20Guy?api_key=${api_key}`
      )
      .then(response => {
        console.log(response.data)
        console.log(response.data.name)
        console.log(response.data.accountId)
        console.log(response.data.summonerLevel)

        this.setState({
          name: response.data.name,
          summonerLevel: response.data.summonerLevel,
          accountId: response.data.accountId
        })
        console.log(this.state.accountId)
      })
    var account_Id = this.state.accountId

---

添加第二个请求

componentDidMount () {
    var api_key = '';

    axios
      .get(
        `https://na1.api.riotgames.com/lol/summoner/v3/summoners/by-name/Senpai%20My%20Guy?api_key=${api_key}`
      )
      .then(response => {
        console.log(response.data)
        console.log(response.data.name)
        console.log(response.data.accountId)
        console.log(response.data.summonerLevel)

        this.setState({
          name: response.data.name,
          summonerLevel: response.data.summonerLevel,
          accountId: response.data.accountId
        })
        console.log(this.state.accountId)
      })
    var account_Id = this.state.accountId
    axios
      .get(
        `https://na1.api.riotgames.com/lol/match/v3/matchlists/by-account/${account_Id}?api_key=${api_key}`
      )
      .then(response => {
        console.log(response.data.matches)
      })
      .catch(err => {
        console.log(err)
      })
  }

---

错误

GET https://na1.api.riotgames.com/lol/match/v3/matchlists/by-account/0?api_key= 404 (Not Found)
Error: Request failed with status code 404
    at createError (createError.js:16)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

Answer 1

setState是异步的，因此如果您尝试在使用状态后直接访问它，则状态不会被更新。您的axios请求也是异步的，因此您需要确保第一个请求已完成，然后再启动第二个请求。

您可以在第二个请求中使用响应中的accountId变量。

示例

componentDidMount() {
  var api_key = "...";

  axios
    .get(
      `https://na1.api.riotgames.com/lol/summoner/v3/summoners/by-name/Senpai%20My%20Guy?api_key=${api_key}`
    )
    .then(response => {
      var { name, summonerLevel, accountId } = response.data;

      this.setState({ name, summonerLevel, accountId });

      axios
        .get(
          `https://na1.api.riotgames.com/lol/match/v3/matchlists/by-account/${accountId}?api_key=${api_key}`
        )
        .then(response => {
          console.log(response.data.matches);
        })
        .catch(err => {
          console.log(err);
        });
    });
}