Réagir: pourquoi composant enfant n'est pas mise à jour lorsque des changements prop

Pourquoi, dans le pseudo-code de l'exemple de l'Enfant n'a pas re-rendre lorsque des modifications au Conteneur de foo.bar?

Container {
  handleEvent() {
    this.props.foo.bar = 123
  },

  render() {
    return <Child bar={this.props.foo.bar} />
}

Child {
  render() {
    return <div>{this.props.bar}</div>
  }
}

Même si je l'appelle forceUpdate() après modification de la valeur dans un Récipient, Enfant affiche toujours l'ancienne valeur.

Est-ce votre code? On dirait que c'est pas valide Réagir code
Je pense que les accessoires de la valeur ne devrait pas changer dans un conteneur de composant au lieu de cela, il devrait être modifié dans le composant parent par setState et que l'état doit être la carte pour conteneurs accessoires

InformationsquelleAutor Tuomas Toivonen | 2016-08-11

56

Parce que les enfants ne sont pas rerender si les accessoires de la modification du parent, mais si son ÉTAT change 🙂

Ce que vous montrer, c'est ceci:
https://facebook.github.io/react/tips/communicate-between-components.html

Il va passer des données à partir d'un parent à l'enfant à travers des accessoires, mais il n'y a pas de rerender logique.

Vous devez définir un certain état de la mère puis rerender l'enfant sur les parents changent d'état.
Cela pourrait aider.
https://facebook.github.io/react/tips/expose-component-functions.html
- Pourquoi est-ce que setState va provoquer un nouveau rendu, mais forceUpdate pas? Aussi peu hors sujet, mais comment sont les composants mis à jour lorsque les accessoires sont passés de redux et son état est mis à jour grâce à l'action?
- les accessoires ne sont pas mis à jour même si vous mettez à jour les composants les accessoires que vous avez passé sont toujours là. Flux est un autre sujet oui 🙂
- etat != accessoires vous avez besoin de lire plus à ce sujet. Vous ne faites pas de mises à jour avec des accessoires
- vous pouvez la voir directement dans le code source, il n'est tout simplement pas le même processus
InformationsquelleAutor François Richard
23

Mise à jour de l'enfant de l'attribut 'clé' qui est égale à son nom. La composante sera de nouveau rendu à chaque fois que la clé de changements.
```
Child {
  render() {
    return <div key={this.props.bar}>{this.props.bar}</div>
  }
}
```
InformationsquelleAutor polina-c
9

Selon Réagir philosophie composant ne peut pas changer ses accessoires. ils doivent être reçus de la part du parent et doit être immuable. Seul parent peut changer les accessoires de ses enfants.

belle explication sur état vs accessoires

aussi, lire ce fil Pourquoi ne puis-je pas de mise à jour des accessoires react.js?
- N'est-ce pas également dire que le conteneur ne peut pas modifier les accessoires qu'il reçoit de redux magasin?
- Conteneur ne reçoit les accessoires directement à la boutique, ils sont fournis par la lecture d'une partie d'un redux de l'état de l'arbre (à confusion??).!! la confusion est parce que nous ne savons pas à propos de la fonction magique connecter par réagissent-redux. si vous consultez le code source de la méthode de connexion, fondamentalement, il crée une plus forte composante de l'ordre qui a un état de la propriété storeState et est abonné à l'redux magasin. comme storeState modifications de l'ensemble de la re-rendu qui se passe, et la modification des accessoires sont fournis dans le conteneur par la lecture de l'état modifié. espérons que cela répond à la question
- Bonne explication, en pensant à une augmentation de la composante de l'ordre m'aide à comprendre ce qui se passe
InformationsquelleAutor Sujan Thakare
7

J'ai eu le même problème.
C'est ma solution, je ne suis pas sûr que c'est la bonne pratique, dites-moi si ce n':
```
state = {
  value: this.props.value
};

componentDidUpdate(prevProps) {
  if(prevProps.value !== this.props.value) {
    this.setState({value: this.props.value});
  }
}
```
UPD: Maintenant, vous pouvez faire la même chose à l'aide de Réagir Crochets:
(uniquement si le composant est une fonction)
```
const [value, setValue] = useState(propName);
//This will launch only if propName value has chaged.
useEffect(() => { setValue(propName) }, [propName]);
```
- C'est définitivement la réponse correcte, pour ne pas mentionner le plus simple
- Je suis aussi à l'aide de cette approche.
InformationsquelleAutor petrichor

Vous devez utiliser setState fonction. Si non, l'état ne sera pas enregistrer vos modifications, peu importe la façon dont vous utilisez forceUpdate.

Container {
    handleEvent= () => { //use arrow function
        //this.props.foo.bar = 123
        //You should use setState to set value like this:
        this.setState({foo: {bar: 123}});
    };

    render() {
        return <Child bar={this.state.foo.bar} />
    }
    Child {
        render() {
            return <div>{this.props.bar}</div>
        }
    }
}

Votre code ne semble pas valide. Je ne peux pas tester ce code.

Ne devrait-elle pas être <Child bar={this.state.foo.bar} />?
La droite. - Je mettre à jour la réponse. Mais comme je l'ai dit ce n'est pas un code valide. Simplement copier à partir de la question.

InformationsquelleAutor JamesYin

3

Utiliser le setState fonction.
Donc, vous pourriez faire
```
       this.setState({this.state.foo.bar:123}) 
```
l'intérieur de la poignée de la méthode événement.

Une fois, l'état est mis à jour, il sera le déclencheur de changements, et de rendre à nouveau se tiendra.

InformationsquelleAutor Indraneel Bende
0

Vous devriez probablement faire de l'Enfant en tant que composante fonctionnelle si elle n'a pas d'état et simplement rend les accessoires et ensuite appeler à partir du parent. Alternative à cela est que vous pouvez utiliser des crochets avec la composante fonctionnelle (useState) qui va provoquer des apatrides composant de re-rendre.

Aussi, vous ne devez pas modifier le propas comme ils sont immuables. Conserver l'état du composant.
```
Child = ({bar}) => (bar);
```
InformationsquelleAutor satyam soni

Vous devez vous connecter pour publier un commentaire.