そのため、サーバーからデータを取得する編集コンポーネントの初期状態を設定しようとしていますが、コンポーネント状態で編集可能になりました。しかし、私がこれをしようとすると:
<Query query={POST_QUERY} variables={{ id: this.props.match.params.id }}>
{({ data, loading, error }) => {
this.setState({ title: data.title })
これはレンダリング中なので、無限ループに陥ります。クエリコンポーネントでコンポーネントの状態を使用すべきではありませんか?そうでない場合、代替手段は何ですか?
状態が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>
onCompleted
componentでQuery
propを使用して、状態を設定できます。以下の例を参照してください。
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>
)
...