首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在状态更改时不进行渲染

在状态更改时不进行渲染
EN

Stack Overflow用户
提问于 2017-02-24 10:23:52
回答 1查看 312关注 0票数 0

下面是代码:

代码语言:javascript
复制
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,在展开时返回适当长度。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-02-24 10:49:22

我解决了。事实证明,shouldComponentUpdate返回的是false,而不允许重发器发生。我删除了那个方法。现在它工作得很好

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42436184

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档