는

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를 반환하고 다시 렌더링을 허용하지 않았습니다. 그 방법을 삭제했습니다. 이제는 잘 작동합니다.