web-dev-qa-db-ja.com

プロップが変化したときに反応コンポーネントをレンダリングする

小道具が変更されたときにコンポーネントを強制的にレンダリングする方法子コンポーネントのプロップが変更されたときに親コンポーネントを強制的にレンダリングする方法

私はたくさん検索しましたが、すべてのソリューションは新しいReactバージョンで非推奨になりました。

私の任意のページで（Route exact path = "/ post /：id" component = {post}）例（siteUrl/post/1）私は小道具（this.props.match.params）から（：id）を取得していますそれは動作します。

しかし、単一のコンポーネント（投稿）とこのルート（siteUrl/post/1）にいるとき、新しいコンポーネントをこのコンポーネント（：id）に渡します。

小道具は変更されますが、単一のコンポーネントと親コンポーネントは再レンダリングされません...

javascriptreactjsrenderreact-router-domreact-props
3
Kourosh Neyestani

ComponentDidMountメソッドを使用している可能性があります。

コンポーネントがマウントされた（ツリーに挿入された）直後に、componentDidMount（）が呼び出されます。 DOMノードを必要とする初期化はここに行ってください。リモートエンドポイントからデータをロードする必要がある場合、これはネットワーク要求をインスタンス化するのに適した場所です。

ただし、componentDidUpdateを使用する必要があります。

componentDidUpdate（）は、更新が発生した直後に呼び出されます。このメソッドは、最初のレンダリングでは呼び出されません。

クラスを記述せずに、状態やその他のReact機能を使用することもできます。続きを読む： https://reactjs.org/docs/hooks-effect.html

2
Ali Sharifineyestani

親と子の両方を再レンダリングするには、親から子にプロップをパスする必要があります。

   // parent using
   <Parent someProp={{someVal}} />

   // parent render:

   render() {
      const { someProp } = this.props
      <Child someProp={{someProp}} />
   }

componentShouldUpdateで別のロジックを指定しない限り、これは確実に両方のコンポーネントを再レンダリングします

あなたの場合、RouterはParentの親のように見えるので、パス:id小道具として。

RouterがAppのすぐ下の最上位にあることを確認してください

1
Igor Berezin

重要なのは、コンストラクターで最初に子のsomeValを初期化することです

 public static getDerivedStateFromProps(
        nextProps,
        nextState
      ) {
        let { someVal } = nextProps;
        if (nextState.someVal !== someVal) {
          return {
            initialVal,
            someVal: someVal
          };
        }
        return null;
      }

状態が変化したため、プロップの変化が再レンダリングされた後

0
Nicola Munz slimxshady