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
    }
  }
}

说明：

在ParentComponent上我有该折叠，在该折叠上，我使用this.state.id（可能有所不同）传递ID。
单击该按钮还可以切换折叠并显示ChildComponent及其道具。

场景：

ParentComponent是'card'，我不止一个具有不同的ID。
每当我单击按钮时，状态就会用ParentComponent中的新ID更新，并作为道具传递给ChildComponent。

我面临的问题：

如果我切换不同的ParentComponents，则停止调用ChildComponent中的componentDidUpdate，并且不会更新ID。这意味着我需要通过该ID获得的信息不正确。

此外，ChildComponent上的render（）并未被调用，由于它一旦渲染就不会再次渲染。

这就是问题，每次传递给ChildComponent的道具更改时都不应调用componentDidUpdate吗？每当我切换不同的ParentComponent时，我都会更改传递的道具。

预先感谢，希望我能清楚

未调用componentDidUpdate（prevProps）

0 个答案: