React Rendering nicht auf Zustandsänderung

Question

Hier ist der Code:

class Twitch extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state={ 
     channelList:null, 
     streamError:false, 
     channelError:false, 

    } 
    self=this; 
    this.getChannels = this.getChannels.bind(this); 
    } 

    componentWillMount() { 
    this.getChannels(); 
    } 

    shouldComponentUpdate(nextProps, nextState) { 
    if (this.props.color !== nextProps.color) { 
     return true; 
    } 
    if (this.state.channelList !== nextState.channelList) { 
     return true; 
    } 
    return false; 
    } 

    getChannels(){ 
    let channels=["ESL_SC2", "OgamingSC2", 
        "cretetion", "freecodecamp", 
        "storbeck", "habathcx", 
        "RobotCaleb", "noobs2ninjas", 
        "brunofin", "comster404" 
       ]; 

    let resultSet=[]; 
    channels.map(function(channel){ 
     axios.get('https://wind-bow.gomix.me/twitch-api/streams/'+channel) 
     .then(function (response) { 
     let resObj={}; 
     resObj=response.data; 
     axios.get('https://wind-bow.gomix.me/twitch-api/channels/'+channel) 
     .then(function (response) { 
      resObj.channel=response.data; 
      resultSet.push(resObj); 

     }) 
     .catch(function (error) { 
      console.log("channel error",error.response); 
      this.setState({channelError:true}); 
     }); 

     }) 
     .catch(function (error) { 
      console.log("stream error",error.response); 
      this.setState({streamError:true}); 
     }); 
    }) 
    this.setState({channelList:resultSet}); 
    } 

    render(){ 
    console.log('this.state',this.state);// ---------a 
    const {channelList} =this.state; 
    return(
     <div className="container"> 

     {channelList.length>0 && 
      <div> 
      //render stuff here 

     </div>   
     } 
     </div> 
    ); 
    } 
} 


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

Der API-Aufruf arbeitet in Ordnung, und ich bin die Daten an den Staat zu bekommen. Das erneute Rendering findet jedoch nicht statt. Die Datei console.log (a) gibt zuerst die Array-Länge 0 und beim Erweitern die richtige Länge zurück.

Answer 1

Ich löste es. Es stellte sich heraus, shouldComponentUpdate wurde falsch zurückgegeben und lassen Sie den rerender nicht passieren. Ich habe diese Methode entfernt. Jetzt funktioniert es gut