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

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

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

{（{数据，加载，错误}）=>{
this.setState（{title:data.title}）

---

我陷入了一个无限循环，因为这是在渲染中。我是否应该将组件状态与查询组件一起使用？如果不是，还有什么替代方法？

任何需要此数据作为状态的组件都应该在

查询组件中渲染，然后将数据作为道具传递给它。例如：

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>

类MyComponent扩展了React.Component{
建造师（道具）{
此.state={
标题：props.post.title
}
}
}
{（{数据，加载，错误}）=>{
}}

您可以使用

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

---

任何在

Query

组件内设置state的具体原因，都可以直接传递给子组件component@PiyushBhati，在我的例子中，我使用的是需要由状态控制的输入的live form验证程序。@rma在呈现函数中使用setState不是一个好主意。您可以在容器中使用查询组件，并将值传递给r组件使用该组件的

gDSFP

将其设置为状态，在那里您可以使用您的验证器。完全同意，@piyushbati，谢谢。目前，上面DanielRearden的解决方案对我有效。您必须确保仅当data.post存在且未加载时才呈现MyComponent。除非您将获得“未定义”的值《泰晤士报》@daniel rearden您好，我已经尝试了您的解决方案，但在类组件内部无效。您如何在类外部定义查询组件。我不知道这是如何回答这个问题的。获取数据后，它在何处设置状态？一旦设置状态，组件将重新加载，apollo将再次获取数据，因此无限e循环。@RemigiusKalimbaJr否，实际上在重新呈现条件时

if（this.state.isFirstRender）

将为false，因此循环将中断，但它是否仍会触发查询，两次？@SutikshanDubey这似乎是

react apollo中的一个bug

这里有一个正在进行的问题，这应该是可接受的答案，因为它充分回答了OP提出的问题。您可能并不总是希望在内部呈现组件。其他一些数据在哪里可以依靠它先完成。

  ...
     <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>
  )
  ...