使用具有先前请求中设置的状态的变量发出 axios 请求答案

【问题标题】：make axios request using variable with the state set in a previous request使用具有先前请求中设置的状态的变量发出 axios 请求
【发布时间】：2018-08-02 18:17:59
【问题描述】：

项目问题

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

说明

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

状态 accountId：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)

【问题讨论】：

谢谢，我刚刚试了一下，它成功了！
太棒了！不客气。

标签： javascript reactjs axios

【解决方案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);
        });
    });
}

【讨论】：