☰

React: プロパティが変更されても子コンポーネントが更新されないのはなぜですか? 質問する

tag-icon • tag-icon javascript html reactjs
React: プロパティが変更されても子コンポーネントが更新されないのはなぜですか? 質問する

次の疑似コード例では、Container が foo.bar を変更しても Child が再レンダリングされないのはなぜですか?

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

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

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

forceUpdate()Container の値を変更した後に呼び出しても、Child には古い値が表示されます。

ベストアンサー1

子を更新して、属性「key」を名前と同じにします。キーが変更されるたびに、コンポーネントは再レンダリングされます。

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

おすすめ記事