reactjs - 在react-apollo的查询组件中设置状态

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>