は

Question

は、ここでは、コードの状態変化にレンダリングしていない反応：

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') 
); 

APIコールは大丈夫働いていると私は状態にデータを取得しています。しかし、再レンダリングは起こっていません。 console.log（a）は、最初は配列の長さ0を返し、展開時には適切な長さを返します。

Answer 1

私はそれを解決しました。 shouldComponentUpdateがfalseを返し、再レンダリングを行わないようにします。 私はその方法を削除しました。今すぐ動作します