首页 > 其他 > 详细

关于Relay的麻烦之处

时间:2018-03-13 14:56:42      阅读:216      评论:0      收藏:0      [点我收藏+]

问题背景

由于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的麻烦之处

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!