Axios mehrere Anfragen in React

Question

Ich versuche, 2 Anfragen zu erstellen und Variablen mit this.setState({}) für weitere Änderungen zu setzen.

Dies ist, was ich habe:

class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = {user: false, repository :false} 
 
    } 
 

 
    componentDidMount() { 
 
    axios.all([ 
 
    axios.get('https://api.github.com/users/antranilan'), 
 
    axios.get('https://api.github.com/users/antranilan/repos') 
 
    ]) 
 
    .then(axios.spread(function (userResponse, reposResponse) { 
 
      this.setState({user : userResponse.data, repository : reposResponse.data}); 
 
     }); 
 
    } 
 
    
 
    render() { 
 
    return (
 
    <div> 
 
     {this.state.user.login} 
 
     {this.state.repository.length} 
 
    </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

ich mit mehreren Fragen sah durch das, was ich zu tun versucht, aber es gab keine Lösung zu dem, was ich zu achive versuche.

Answer 1

Sie haben ein bindendes Problem in Ihrem Code.

class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    // You should use object to delineate the type 
 
    this.state = {user: {}, repository :{} } 
 
    } 
 

 
    componentDidMount() { 
 
    // Better use native Promise.all 
 
    Promise.all([ 
 
     axios.get('https://api.github.com/users/antranilan'), 
 
     axios.get('https://api.github.com/users/antranilan/repos') 
 
    ]) 
 
    // use arrow function to avoid loosing context 
 
    // BTW you don't need to use axios.spread with ES2015 destructuring 
 
    .then(([userResponse, reposResponse]) => { 
 
      this.setState({user : userResponse.data, repository : reposResponse.data}); 
 
     }); 
 
    } 
 
    
 
    render() { 
 
    const { user, repository } = this.state 
 
    return (
 
    <div> 
 
     {user && user.login} 
 
     {repository && repository.length} 
 
    </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

UPDATE als @JaromandaX wies darauf hin, Sie besser mit nativer Promise.all und Destrukturierung bleiben würde.