Q:

make axios request using variable with the state set in a previous request

Project Issues

I'm having a problem using the state that was set, instead of the initial state where the values are empty.

Description

Im making an axios request and using the response to set the state. 
Im making another axios request that uses a parameter that I can only get after making the first request. 
When I try to reference the state that was set in the second request, it instead of using the set state it points back to the initial state. 
Therefore making the request fail 
from react dev tools

State accountId: 47228906 name: "Senpai My Guy" summonerLevel: 127

Code Snippet
initial state

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

first request

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

add in the second one request
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)
      })
  }

Error
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)

A:

setState is asynchronous, so the state will not have been updated if you try to access it directly after using it. Your axios requests are also asynchronous, so you need to make sure the first request has finished before starting the second one.
You could instead use the accountId variable from the response in your second request.
Example
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);
        });
    });
}

