webentwicklung-frage-antwort-db.com.de

prevState in componentDidUpdate ist der currentState?

Ich habe componentDidUpdate() in der Vergangenheit verwendet und es hat wie erwartet funktioniert.

Diesmal tat ich es jedoch

componentDidUpdate(prevProps, prevState) {
    if (prevState.object.someString !== this.state.object.someString) {
        console.log(true);
    }
}

und true wird nie protokolliert. Ich habe beide Statusobjekte in der Konsole protokolliert und festgestellt, dass sie genau gleich sind: der aktuelle Status.

Ist das ein Bug? Was vermisse ich hier?

Vielen Dank.

Bearbeiten: Ich habe versucht, das gleiche mit componentWillUpdate(nextProps, nextState) zu tun, und wieder sind sie das gleiche Objekt.

Bearbeiten 2: Ich ändere den Status folgendermaßen:

modifyObject = (field, value) => {
    const { object } = this.state;
    object[field] = value;
    this.setState({ object });
}
reactjsreact-nativestate
3
Daniel Valderrama

Im hinzugefügten Code mutieren Sie ein Referenzobjekt, indem Sie nur eine Eigenschaft für das Objekt ändern. Dies bedeutet, dass sich nextProps und previousProps im Wesentlichen auf dieselbe Referenz beziehen.

Kein Wunder, dass Ihre componentDidUpdate keinen Unterschied fand.

Sie sollten eine neue Version Ihres Objekts erstellen und diese verwenden, um den Status festzulegen:

this.setState({ object: { ...object, [field]: value } })

oder wenn Sie keinen Spread-Operator haben, so etwas

this.setState( { object: Object.assign({}, object, { [field]: value }) } );
7
Icepickle

beachten Sie, dass: 

componentDidUpdate () wird nicht aufgerufen, wenn sollteComponentUpdate () false zurückgeben. ref: https://reactjs.org/docs/react-component.html#componentdidupdate

 shouldComponentUpdate(nextProps, nextState) {
    if (this.state.someString !== nextState.someString) {
      return true;
    }
    return false;
  }

componentDidUpdate(prevProps, prevState) {
    if (prevState.someString !== this.state.someString) {
        console.log(true);
    }
}

verwenden Sie in manchen Fällen eine ähnliche Methode wie die Methode lodash isEqual, um den Zustand/die Requisiten bei Verwendung von shouldComponentUpdate gründlich zu vergleichen:

shouldComponentUpdate(nextProps, nextState) {
        return !isEqual(this.state, nextState);
      }

wenn Sie über hoch entwickelte Requisiten/Zustände verfügen, erhöht dies Ihre Leistung, da kein verschwenderisches Rendern auftritt

1
toufek khoury

Vielen Dank Icepickle für Ihren Kommentar, der das Problem gelöst hat.

Anstatt zu tun

modifyObject = (field, value) => {
    const { object } = this.state;
    object[field] = value;
    this.setState({ object });
}

Ich tat

modifyObject = (field, value) => {
    const { object } = this.state;
    this.setState({ object: { ...object, [field]: value } });
}

Danke noch einmal.

0
Daniel Valderrama