反応：プロップが変更されても子コンポーネントが更新されない理由

次の疑似コードの例で、コンテナが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>
  }
}

forceUpdate()コンテナの値を変更した後に呼び出しても、子はまだ古い値を示しています。

名前と等しい属性「キー」を持つように子を更新します。コンポーネントは、キーが変更されるたびに再レンダリングします。

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

なぜなら、親のプロップが変更されても、その状態が変更された場合、子供は再レンダリングしないからです:)

あなたが示しているのはこれです：https : //facebook.github.io/react/tips/communicate-between-components.html

プロップを介して親から子にデータを渡しますが、そこには再レンダリングロジックはありません。

親にいくつかの状態を設定してから、親が状態を変更したときに子を再レンダリングする必要があります。これは役に立ちます。 https://facebook.github.io/react/tips/expose-component-functions.html

同じ問題がありました。これは私の解決策ですが、それが良い習慣かどうかはわかりませんが、そうでない場合は教えてください：

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

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

UPD：React Hooksを使用して同じことができるようになりました（コンポーネントが関数の場合のみ）。

const [value, setValue] = useState(propName);
// This will launch only if propName value has chaged.
useEffect(() => { setValue(propName) }, [propName]);

Reactの哲学コンポーネントによると、小道具を変更することはできません。それらは親から受け取り、不変でなければなりません。親だけが子の小道具を変更できます。

状態vs小道具についての良い説明

また、このスレッドを読んでください。どうしてreact.jsのプロップを更新できないのですか？

setState関数を使用する必要があります。そうでない場合、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>
        }
    }
}

コードが無効のようです。このコードはテストできません。

functionsおよびからReactコンポーネントを作成する場合useState。

const [drawerState, setDrawerState] = useState(false);

const toggleDrawer = () => {
      // attempting to trigger re-render
      setDrawerState(!drawerState);
};

これはいない仕事を

         <Drawer
            drawerState={drawerState}
            toggleDrawer={toggleDrawer}
         />

これは機能します（キーを追加）

         <Drawer
            drawerState={drawerState}
            key={drawerState}
            toggleDrawer={toggleDrawer}
         />

確認済み、キーの追加は機能します。その理由を理解するためにドキュメントを読みました。

Reactは、子コンポーネントを作成するときに効率的であることを望んでいます。別の子と同じ場合、新しいコンポーネントをレンダリングしないため、ページの読み込みが速くなります。

キーを追加すると、Reactは新しいコンポーネントをレンダリングし、その新しいコンポーネントの状態をリセットします。

https://reactjs.org/docs/reconciliation.html#recursing-on-children

setState関数を使用します。だからあなたはできる

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

ハンドルイベントメソッド内。

状態が更新されると、変更がトリガーされ、再レンダリングが行われます。

状態を維持せず、単純に小道具をレンダリングして親から呼び出す場合は、子を機能コンポーネントとして作成する必要があります。これの代わりに、機能コンポーネント（useState）でフックを使用して、ステートレスコンポーネントを再レンダリングすることができます。

また、プロパスは不変なので、変更しないでください。コンポーネントの状態を維持します。

Child = ({bar}) => (bar);

私は同じ問題に遭遇していました。小道具Tooltipを受け取っているコンポーネントがあり、条件に基づいてコンポーネントをshowTooltip更新していました。コンポーネントで更新されていましたが、コンポーネントがレンダリングされていませんでした。ParentifParentTooltip

const Parent = () => {
   let showTooltip = false;
   if(....){ showTooltip = true; }
   return(
      <Tooltip showTooltip={showTooltip}></Tooltip>
   )
}

私がやっていた間違いはshowTooltip、letとして宣言することです。

レンダリングの動作原理に違反していることに気づき、フックで置き換えるとうまくいきました。

const [showTooltip, setShowTooltip] =  React.useState<boolean>(false);

子コンポーネントのconnectメソッドのmapStateToPropsで変更されたプロップを定義します。

function mapStateToProps(state) {
  return {
    chanelList: state.messaging.chanelList,
  };
}

export default connect(mapStateToProps)(ChannelItem);

私の場合、channelListのチャネルが更新されたので、mapStateToPropsにchanelListを追加しました