在 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>

Answer 2

您可以在 Query 组件上使用 onCompleted 属性来设置状态。请参阅以下示例：

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多次触发的bug在最新版本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>
  )
  ...

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

Setting state in the Query component of react-apollo

reactjs

react-apollo