在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组件内部呈现,然后将数据作为prop传递给它.例如:

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>

Answer 2

您可以使用onCompletedprop on Query组件来设置状态。请参见以下示例：

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

  setTitle = title => {
    if (this.state.isFirstRender){
        this.setState({title, isFirstRender: false})
    }
  }

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

编辑：

由于onCompleted最新版本的中已解决了多次触发的错误react-apollo，我们现在可以简单地执行以下操作：

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