it-swarm.com.de

Reaktion: Warum die untergeordnete Komponente nicht aktualisiert wird, wenn sich die Requisite ändert

Warum wird im folgenden Pseudocodebeispiel Child nicht erneut gerendert, wenn Container foo.bar ändert? 

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

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

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

Selbst wenn ich forceUpdate() nach dem Ändern des Werts in Container anrufe, zeigt Child immer noch den alten Wert.

50
Tuomas Toivonen

Weil Kinder nicht rendern, wenn sich die Requisiten des Elternteils ändern, aber wenn sich ihr STATUS ändert :)

Sie zeigen Folgendes: https://facebook.github.io/react/tips/communicate-between-components.html

Es wird Daten von den Eltern über Requisiten an Kinder weitergeben, aber es gibt keine Wiederherstellungslogik.

Sie müssen einen Status für das übergeordnete Element festlegen und dann das übergeordnete Element erneut überarbeiten, wenn es sich um einen übergeordneten Status handelt. Dies kann helfen. https://facebook.github.io/react/tips/expose-component-functions.html

46

Gemäß der React-Philosophie kann die Komponente ihre Requisiten nicht ändern. Sie sollten vom Elternteil erhalten werden und sollten unveränderlich sein. Nur die Eltern können die Requisiten ihrer Kinder wechseln.

Schöne Erklärung zu Staat vs Requisiten

lesen Sie auch diesen Thread Warum kann ich Requisiten in react.js nicht aktualisieren?

7
Sujan Thakare

Sie sollten die Funktion setState verwenden.

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

Ihr Code scheint ungültig zu sein. Ich kann diesen Code nicht testen.

5
JamesYin

Aktualisieren Sie das Kind so, dass das Attribut 'key' gleich dem Namen ist:

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

Verwenden Sie die setState-Funktion ..__

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

innerhalb der Handle-Event-Methode.

Sobald der Status aktualisiert ist, werden Änderungen ausgelöst, und es wird erneut gerendert.

3
Indraneel Bende

Sie sollten das untergeordnete Element wahrscheinlich als funktionale Komponente definieren, wenn es keinen Status beibehält und die Requisiten einfach rendert und dann vom übergeordneten Element aufruft. Alternativ dazu können Sie Hooks mit der Funktionskomponente (useState) verwenden, wodurch die zustandslose Komponente erneut gerendert wird.

Auch sollten Sie die Propas nicht verändern, da sie unveränderlich sind. Zustand der Komponente pflegen.

Child = ({bar}) => (bar);
0
satyam soni

Ich hatte das gleiche Problem ... Dies ist meine Lösung. Ich bin mir nicht sicher, ob dies die beste Praxis ist. Sagen Sie mir, wenn nicht:

state = {
  value: this.props.value
};

componentDidUpdate(prevProps) {
  if(prevProps.value !== this.props.value) {
    this.setState({value: this.props.value});
  }
}
0
petrichor