在react-apollo的Query组件中设置状态

Question

因此，我正在尝试为从服务器获取数据的编辑组件设置初始状态，现在应该可以在组件状态下对其进行编辑。但是当我尝试这样做时：

<Query query={POST_QUERY} variables={{ id: this.props.match.params.id }}>
    {({ data, loading, error }) => {
      this.setState({ title: data.title })

因为这是在渲染中，所以我陷入了无限循环。我不应该将组件状态与查询组件一起使用吗？如果没有，那还有什么选择呢？

Answer 1

无论哪个组件需要此数据作为状态，都应在Query组件内部进行渲染，然后将数据作为道具传递给它。例如：

class MyComponent extends React.Component {
  constructor (props) {
    this.state = {
      title: props.post.title
    }
  }
}

<Query query={POST_QUERY} variables={{ id: this.props.match.params.id }}>
  {({ data, loading, error }) => {
    <MyComponent post={data.post}/>
  }}
</Query>