web-dev-qa-db-fra.com

Définition de l'état dans le composant de requête de react-apollo

Donc, je tente de définir un état initial pour un composant d'édition qui obtient des données du serveur et devrait maintenant être éditable dans l'état du composant. Mais quand j'essaie de faire ça: 

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

Je suis coincé dans une boucle infinie puisque c'est en rendu. Ne dois-je pas utiliser l'état du composant avec le composant de requête? Et si non, quelle est l'alternative? 

reactjsreact-apollo
8
The Kaizer

Tout composant ayant besoin de ces données en tant qu'état doit être rendu dans le composant Query, puis les données doivent lui être transmises comme accessoire. Par exemple:

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>
10
Daniel Rearden

Vous pouvez utiliser la propriété onCompleted sur Querycomponent pour définir l'état. Voir ci-dessous exemple:

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