React点击按钮打开Modal触发全页面重渲染、状态重置问题求解

核心问题原因 #

你观察到的「全量重渲染、状态全部重置」本质是整页刷新，不是React层面的组件重渲染，问题根源出在触发按钮的实现上：

1. 你用了href为空的<a>标签作为触发按钮，空href的默认行为是跳转至当前页面，也就是触发整页重载，所有React应用状态自然会全部回到初始值
2. 你同时混用了MUI Modal的受控控制逻辑和Bootstrap模态框的属性指令，两套模态框控制逻辑冲突也会引发异常

修复方案 #

1. 替换按钮实现/阻止默认跳转行为
   两种方案二选一即可：

• 语义化更优：直接用<button>标签代替<a>标签，删掉href、data-toggle、data-target属性

<button
  className="theme-button theme-button-small theme-red w-btn-nocase w-btn-white knowmore-btn"
  onClick={() => {
    setModalContent(partner.modal);
    handleOpen();
  }}
>查看详情</button>

• 保留<a>标签：给href赋值为javascript:void(0)，同时在点击事件里阻止默认行为

<a
  href="javascript:void(0)"
  className="theme-button theme-button-small theme-red w-btn-nocase w-btn-white knowmore-btn"
  onClick={(e) => {
    e.preventDefault();
    setModalContent(partner.modal);
    handleOpen();
  }}
>查看详情</a>

2. 清理模态框冗余属性
   删掉MUI Modal组件上所有Bootstrap相关的属性，同时把模态框内的关闭按钮的data-dismiss属性替换为直接调用handleClose方法：

<Modal
  open={showModal}
  onClose={handleClose}
>
  <Box sx={style}>
    <div className="modal-dialog model-lg" role="document">
      <div className="modal-content" id="modalBody">
        <div className="modal-header">
          <button
            type="button"
            className="close"
            onClick={handleClose}
          >×</button>
          <h4 className="modal-title">
            <span>
              <b>{modalContent.modalHeader}</b>
            </span>
          </h4>
        </div>
        {/* 其他模态框内容保留 */}
      </div>
    </div>
  </Box>
</Modal>

3. 可选优化：列表map的key不要用index，替换为partner里的唯一标识字段（比如id），避免列表变更时出现渲染异常。

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