reactjs – 当Apollo提取的数据已准备好使用React和GraphQL时

发布时间：2020-12-15 16:19:28 所属栏目：百科来源：网络整理

导读：我想基于GraphQL查询呈现将以初始值(事件)开头的日历组件(名为Calendar). 当用户按下按钮时,日历将只获得一些事件(不需要添加查询)并将重新呈现. 我设法分别做了每个,但不是两个：对于(1)：仅在数据准备就绪时渲染,而不是使用状态,则无法完成(2). 对于(2)：

>我想基于GraphQL查询呈现将以初始值(事件)开头的日历组件(名为Calendar).
>当用户按下按钮时,日历将只获得一些事件(不需要添加查询)并将重新呈现.
我设法分别做了每个,但不是两个：

对于(1)：仅在数据准备就绪时渲染,而不是使用状态,则无法完成(2).
对于(2)：使用状态但不能完成(1).

下面的代码很简单：

import React,{ Component,PropTypes } from 'react';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';

const requestsQuery = gql`query requestsQuery { ... }

class MainComponent extends Component {
    constructor() {
      super();
      this.state = {
        events: []
      };
      // here i want to know when the data that apollo fetched is ready
      // and then i will create events (using the data)
      // and then:
      // this.setState({events: events});
    }

    renderLoader() {
      return (
        <div>
          Loading...
        </div>
      );
    }

    onItemClick(){
      // make some events
      this.setState({events: events});
    }

    renderCalendar(){
      return (
        <Calendar events={this.state.events}/>
      );
    }

    renderRows(requests) {
      return (
        requests.map((request) => {
          return (
            <div>
              {request.displayName}
              <button onClick = {this.onItemClick.bind(this,request)}>show only some events</button>
            </div>
          );
        })
      );
    }

    render() {
        const { loading,requests } = this.props;

        return (
          <div>
            {loading
                ? this.renderLoader()
                : <div>{this.renderRows(requests)}</div>
            }
          </div>
        );
    }
}

const MainComponentWithData = graphql(requestsQuery,{
  props({ ownProps,data: { loading,requests } }) {
    return {
      loading,requests
    };
  },})(MainComponent);

在render()方法内部,我知道加载是假的,因此,数据准备好了,但我不知道如何在其他地方做.

如果我初始化renderRows(requests)中的事件然后使用this.setState({events：events}),则react将永远重新渲染.

问题：我如何完成(1)和(2)？

解决方法

我想你想从GraphQL中获取事件.当您单击要重新获取的AnotherComponent项时.

从查询中设置状态的一种可能性是使用componentWillReceiveProps功能.
但不建议将状态和道具结合起来.

一个例子：

...
componentWillReceiveProps(newProps) {
    if (!newProps.<query name>.loading) {
       ...
       this.setState({events: events});
    }
  }
  ...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!