Requêtes multiples Axios dans React

Question

J'essaie de créer 2 demandes et de définir des variables avec this.setState({}) pour d'autres modifications.

C'est ce que je suis:

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>

J'ai regardé à travers plusieurs des questions avec ce que je suis en train de faire, mais il n'y avait pas de solution à ce que je suis en train de achive.

Answer 1

Vous avez un problème de liaison dans votre 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>

MISE À JOUR que @JaromandaX a souligné que vous feriez mieux de coller avec natif Promise.all et déstructurant.