web-dev-qa-db-ja.com

componentDidUpdateのprevStateはcurrentStateですか？

過去にcomponentDidUpdate()を使用しましたが、期待通りに機能しました。

今回は、しかし、私はやった

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

trueは記録されません。両方の状態オブジェクトをコンソールに記録しましたが、それらはまったく同じものであることがわかりました。現在の状態です。

これはバグですか？ここで何が欠けていますか？

ありがとうございました。

編集：私はcomponentWillUpdate(nextProps, nextState)で同じことをしようとしましたが、再び、彼らは同じオブジェクトです。

編集2：私は次のことで状態を変更しています：

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

追加されたコードでは、オブジェクトのプロパティを変更するだけで参照オブジェクトを変更しています。つまり、最終的にnextPropsとpreviousPropsは本質的に同じ参照を参照します。

したがって、componentDidUpdateが違いを見つけられなかったことは驚くことではありません。

あなたがすべきことは、オブジェクトの新しいバージョンを作成し、それを使用して状態を設定することです：

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

または、スプレッド演算子がない場合は、

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

ご了承ください：

shouldComponentUpdate（）がfalseを返す場合、componentDidUpdate（）は呼び出されません。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);
    }
}

場合によっては、lodash isEqualメソッドのようなものを使用して、shouldComponentUpdateを使用するときに状態/プロパティを深く比較します。

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

洗練された小道具/状態がある場合、無駄なレンダリングが発生しないため、パフォーマンスが向上します

1
toufek khoury

問題を解決したコメントをありがとうございます。

する代わりに

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

やった

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

再度、感謝します。

0
Daniel Valderrama