关于Relay的麻烦之处

Posted 2020-10-27 Kuai Jiajin

问题背景

由于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呢？