javascript - componentDidUpdate(prevProps) が呼び出されていません

Question

**最初にコードを投稿してから、後で何が問題なのかを説明します。

class ParentComponent extends Component {
  constructor() {
    super()

    this.state = {
      id: null,
    }
}

  render() {
    const dataTarged = "#col" + id
    const id = "col" + id
    return (
      <React.Fragment>
        <div>
          <button data-toggle="collapse" data-target={dataTarged} onClick={() => this.setState({ id: <<this id may vary>> })}>Click me</button>
        </div>

        <div className="collapse mt-4" id={id}>
          <ChildComponent id={this.state.id} />
        </div>
      </React.Fragment>
    )
  }
}



class ChildComponent extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.id != prevProps.id) {
      //do stuff with the ID
    }
  }
}

説明：

1. ParentComponent にはその折りたたみがあり、その折りたたみでは、this.state.id (異なる場合があります) を使用して ID を渡しています。
2. クリック時のそのボタンは、折りたたみを切り替え、その小道具で ChildComponent を表示しています。

シナリオ：

1. ParentComponent は「カード」で、ID が異なるものが複数あります。
2. ボタンをクリックするたびに、ParentComponent からの新しい ID で状態が更新され、小道具として ChildComponent に渡されます。

私が直面している問題:

別の ParentComponents を切り替えると、ChildComponent の componentDidUpdate の呼び出しが停止し、ID が更新されません。その ID で取得する必要がある情報が正しくないことを意味します。

また、ChildComponent の render() が呼び出されていないため、一度レンダリングしたため、再度レンダリングすることはないようです。

それが問題です。 ChildComponent に渡された小道具が変更されるたびに componentDidUpdate を呼び出すべきではありませんか? 別の ParentComponent を切り替えるたびに、渡される小道具を変更しています。

前もってありがとう、私は自分自身を明確にしたことを願っています