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

您可以在onCompleted组件上使用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>
  }
}

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

2 个答案: