-
我想基于GraphQL查询呈现将以初始值(
events
)开头的日历组件(名为Calendar
) . -
当用户按下按钮时,
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)?
1 回答
我想你想从GraphQL中获取事件 . 当您单击要重新获取的AnotherComponent项时 .
从查询中设置状态的一种可能性是使用componentWillReceiveProps功能 . 但不建议将状态和道具结合起来 .
一个例子: