码迷,mamicode.com
首页 > 其他好文 > 详细

关于Relay的麻烦之处

时间:2018-03-13 15:35:37      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:new   ons   enter   concat   first   直接   script   load   body   

问题背景

由于QueryRender是直接将数据塞进Render()里的

  handleUpdate = (hasNextPage, xdata) =>{
    console.log(3);
    const data = this.state.data.concat(xdata);
    this.setState({
      data: data,
      loadingMore: false,
      hasNextPage: hasNextPage
      }, () => {
        window.dispatchEvent(new Event(‘resize‘));
      });
  }
  render(){
    return(
      <QueryRenderer
      environment={env}
      query={SearchListQuery}
      variables={{
        search: this.props.search,
        first: this.props.pageSize,
        after: this.state.after
      }}
      render={({error, props}) => {
      if (error) {
          console.log(error)
      }

      if (!props) {
          return (<Spin   className={"selection-spin"} size={‘large‘}/>)
      }
      this.handleUpdate(props.bookList.hasNextPage, props.bookList.edges);  
      const loadMore = this.state.hasNextPage ? (
        <div style={{ textAlign: ‘center‘, marginTop: 12, height: 32, lineHeight: ‘32px‘ }}>
          {this.state.loadingMore && <Spin />}
          {!this.state.loadingMore && <Button onClick={() =>  {
            this.setState({
              loadingMore: true,
              after: props.bookList.pageInfo.endCursor});
          }}>加载更多</Button>}
        </div>
      ) : null;
      const mydata = this.state.data.concat(props.bookList.edges);
      return (
        <SearchListComponent  loadMore={loadMore}  dataSource={mydata}/>
      )
      }}
      />     
    )
  }

直接在render里进行setState会导致组件无限循环渲染,当然把queryrender取缔掉用fetch替换可以解决,但是怎么在使用relay的同时直接setState呢?

关于Relay的麻烦之处

标签:new   ons   enter   concat   first   直接   script   load   body   

原文地址:https://www.cnblogs.com/jiajin/p/8556113.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!