父组件Next按钮仅首次触发弹窗，后续点击无响应求助

问题出在子组件的状态管理逻辑上：子组件自己维护showDialog状态，初始值为true，点击No按钮后设为false，但父组件再次点击Next按钮时，子组件已经挂载完成，不会重新执行constructor初始化状态，所以showDialog一直保持false，弹窗自然无法再次弹出。

正确的做法是把弹窗的显示控制权交给父组件，让父组件统一管理弹窗的显示/隐藏状态，具体修改如下：

父组件修改 #

1. 在父组件state中新增控制弹窗显示的状态：

constructor() {
  this.state = { 
    enableNextButton: false,
    showConfirmDialog: false // 新增：控制弹窗显示
  };
}

2. 修改checking方法，点击Next时触发弹窗显示：

checking () {
  let { add1, countryCode, stateProvince, zip, companyName } = this.state;
  let payload = {
    address_l1: add1,
    country: countryCode,
  };
  this.setState({
    enableNextButton: false,
    showConfirmDialog: true // 点击Next时显示弹窗
  });
};

3. 传递关闭回调给子组件，并根据状态决定是否渲染弹窗：

return (
  <>
    <div>
      <button
        onClick={() => this.checking()}
        className={
          this.state.enableNextButton ? "primary" : "primary disabled"
        }
      >
        <span className="back">Next &gt; </span>
      </button>
      <BarLoader
        width={"50%"}
        color={"#84B135"}
        loading={this.props.addLoader}
      />
    </div>

    {/* 根据状态渲染弹窗，传递关闭回调 */}
    {this.state.showConfirmDialog && (
      <ChildComp 
        onClose={() => this.setState({ showConfirmDialog: false })}
      />
    )}
  </>
);

子组件修改 #

1. 移除子组件内部的showDialog状态，通过props接收关闭回调：

constructor(props) {
  super(props);
  // 删除内部的showDialog状态
}

// No按钮点击时调用父组件传递的关闭回调
handleNoButtonClick = () => {
  this.props.onClose();
};

return (
  <div>
    <div className="padding-around">
      Do you wish to continue with below address?
    </div>
    <div>
      <button
        className="primary"
        onClick={this.handleNoButtonClick}
      >
        NO
      </button>
      {/* 补充Yes按钮逻辑，示例：关闭弹窗+后续处理 */}
      <button
        className="primary"
        onClick={() => {
          // 这里添加Yes按钮的业务逻辑，比如提交地址
          this.props.onClose();
        }}
      >
        YES
      </button>
    </div>
  </div>
);

修改后，每次点击父组件的Next按钮，都会将showConfirmDialog设为true触发弹窗渲染；点击No按钮时，通过回调通知父组件将状态设为false隐藏弹窗。再次点击Next时，状态会被重新置为true，弹窗就能正常弹出了。

内容的提问来源于stack exchange，提问作者Sundeep