React : pourquoi le composant enfant n'est pas mis à jour lorsque la prop change ?

Question

Pourquoi, dans l'exemple de pseudo-code suivant, l'enfant ne se présente pas à nouveau lorsque le conteneur change 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 j'appelle forceUpdate() après avoir modifié la valeur dans Container, Child affiche toujours l'ancienne valeur.

Answer 1

Mettez à jour l'enfant pour que l'attribut "key" soit égal au nom. Le composant sera rendu à nouveau chaque fois que la clé sera modifiée.

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

Answer 2

Parce que les enfants ne sont pas rerendus si les props du parent changent, mais si son STATE change :)

Ce que vous montrez est ceci : https://facebook.github.io/react/tips/communicate-between-components.html

Il transmet les données du parent à l'enfant par le biais de props, mais il n'y a pas de logique de rendu.

Vous devez définir un certain état pour le parent, puis rendre à nouveau l'enfant lorsque le parent change d'état. Ceci pourrait vous aider. https://facebook.github.io/react/tips/expose-component-functions.html

Answer 3

Selon la philosophie React, un composant ne peut pas changer ses props. Ils doivent être reçus du parent et doivent être immuables. Seul le parent peut modifier les props de ses enfants.

bonne explication sur État et accessoires

également, lisez ce fil de discussion Pourquoi je ne peux pas mettre à jour les props dans react.js ?

Answer 4

Vous devez utiliser setState fonction. Si ce n'est pas le cas, l'État n'enregistrera pas votre modification, quelle que soit 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.

Answer 5

Utilisez la fonction setState. Vous pourriez donc faire

       this.setState({this.state.foo.bar:123}) 

dans la méthode de gestion de l'événement.

Une fois que l'état est mis à jour, cela déclenchera des changements, et un nouveau rendu aura lieu.