因此，我正在尝试为从服务器获取数据的编辑组件设置初始状态，现在应该可以在组件状态下进行编辑。但是当我尝试这样做时：
<Query query={POST_QUERY} variables={{ id: this.props.match.params.id }}>
{({ data, loading, error }) => {
this.setState({ title: data.title })
由于这是在渲染中，我陷入了无限循环。我不应该在查询组件中使用组件状态吗？如果没有，还有什么选择？
任何需要此数据作为状态的Query组件都应该在组件内部呈现，然后将数据作为props传递给它。例如：
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>
您可以使用组件上的onCompletedpropsQuery来设置状态。见下面的例子：
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>
)
...