web-dev-qa-db-ja.com

react-apolloのQueryコンポーネントで状態を設定する

そのため、サーバーからデータを取得する編集コンポーネントの初期状態を設定しようとしていますが、コンポーネント状態で編集可能になりました。しかし、私がこれをしようとすると：

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

これはレンダリング中なので、無限ループに陥ります。クエリコンポーネントでコンポーネントの状態を使用すべきではありませんか？そうでない場合、代替手段は何ですか？

reactjsreact-apollo
17
The Kaizer

状態が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>
19
Daniel Rearden

onCompletedcomponentで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>
  )
  ...
12
Eesa