React-Bootstrap Modal关闭按钮失效：类组件状态修复咨询

我帮你定位到了问题的核心：你在类组件的状态里错误地加入了冗余的setShow字段，并且关闭Modal时更新的是这个无关字段，而非控制Modal显示的show状态。下面是一步步的修复方案：

1. 清理冗余状态字段 #

类组件不需要像函数组件那样单独维护setState对应的setter变量，把state里的setShow删掉，只保留控制Modal显示的show字段：

state = {
  whichComponentToShow: "FeatureCard",
  show: false, // 仅保留这个控制Modal显示的状态
};

2. 修正状态更新逻辑 #

将handleClose和handleShow方法里的状态更新目标改为show，而不是错误的setShow：

handleClose = () => {
  // 更新show为false，关闭Modal
  this.setState({ show: false });
};

handleShow = () => {
  // 更新show为true，打开Modal
  this.setState({ show: true });
};

3. 确保Modal的状态绑定正确 #

你的Modal组件已经正确绑定了show={this.state.show}和onHide={this.handleClose}，这部分无需修改，但要确保所有关闭触发点（包括Modal头部的关闭按钮和底部的Close按钮）都正确调用了handleClose，你当前的代码这部分是没问题的。

可选：优化组件切换逻辑（更简洁） #

其实你不需要用whichComponentToShow来切换显示FeatureCard还是Modal，直接通过show状态控制Modal的显示/隐藏即可，点击FeatureCard时调用handleShow打开Modal，这样逻辑更清晰：

render() {
  return (
    <div className="Shirts" style={{ margin: "3rem 0rem" }}>
      <div>
        <AllDressHeader 
          Image={ShirtHeader} 
          h1="SHIRTS FOR MEN" 
          para="Id adipisicing elit adipisicing Lorem. Laborum deserunt laboris ex aliqua deserunt ipsum irure culpa pariatur in esseRegular box》 esse To(Man.A(LR and.input�素)
          h2="CHOOSE YOUR FAVOURITE SHIRT NOW" 
        />
      </div>
      <Container>
        <Row>
          <Col>
            <FeatureCard 
              OnClick={this.handleShow} 
              image={img} 
              title="Sky Blue" 
              price="9$" 
            />
          </Col>
          <Col>
            <FeatureCard image={img2} title="Beach Light" price="25.50$" />
          </Col>
          <Col>
            <FeatureCard image={img3} title="Official Formal" price="9.99$" />
          </Col>
          <Col>
            <FeatureCard image={img4} title="Denim" price="19$" />
          </Col>
        </Row>
        <Row>
          {/* 其他FeatureCard代码保持不变 */}
          <Col>
            <FeatureCard image={img5} title="Red Black" price="12$" />
          </Col>
          <Col>
            <FeatureCard image={img6} title="Blue White Denim" price="56$" />
          </Col>
          <Col>
            <FeatureCard image={img7} title="White Long Sleeve" price="8$" />
          </Col>
          <Col>
            <FeatureCard image={img8} title="Blue Dotted" price="9.50$" />
          </Col>
        </Row>
      </Container>

      {/* 直接把Modal放在render中，通过show状态控制显示 */}
      <Modal show={this.state.show} onHide={this.handleClose} centered size="xl">
        <Modal.Header closeButton></Modal.Header>
        <Modal.Body>
          <Container fluid>
            <Row>
              <Col lg={12}>
                <ProductCard image={shirts} title="Sky Blue" price="9$" add="shirt" />
              </Col>
            </Row>
          </Container>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={this.handleClose}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

完成以上修改后，点击关闭按钮时，Modal就能正常关闭了。

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