关闭React Modal时更新父组件State报错的解决方案咨询

这个错误的核心原因是你在React的状态过渡周期中（比如组件render过程、已有状态更新的回调里）触发了新的状态更新，加上你的代码里存在父子组件双维护Modal显示状态的冗余逻辑，导致状态更新冲突。下面是具体的修复方案：

第一步：修复父组件的状态更新逻辑 #

先看你父组件里handleAccountEdit的写法，这里存在明显错误：setState的第二个参数是回调函数，你却直接同步调用了另一个setState，这会导致两次状态更新同步执行，破坏React的异步更新机制。

修改父组件的状态更新逻辑：

export class Accounts extends Component {
  constructor(props, context) {
    super(props);
    this.state = {
      loading: true,
      showEditUserModal: false,
      userId: null,
      redraw: false,
    }
    this.handleAccountEdit = this.handleAccountEdit.bind(this);
    this.handleAccountEditClose = this.handleAccountEditClose.bind(this);
  }

  // 合并状态更新，避免多次setState
  handleAccountEdit(cell, row, rowIndex) {
    this.setState({ 
      userId: cell,
      showEditUserModal: true 
    });
  }

  handleAccountEditClose() {
    this.setState({ 
      userId: null, 
      showEditUserModal: false, 
      redraw: true 
    });
  }

  render() {
    return (
      <div className='container-fluid'>
        {/* 父组件完全控制Modal的显示/隐藏，将状态作为props传递 */}
        {this.state.showEditUserModal && (
          <AccountEditModal 
            userId={this.state.userId} 
            onClose={this.handleAccountEditClose}
            show={this.state.showEditUserModal}
          />
        )}
      </div>
    )
  }
}

第二步：重构子组件，移除冗余状态 #

你的子组件自己维护了showModal状态，和父组件的showEditUserModal形成了双源状态，这是导致冲突的关键。我们让父组件完全控制Modal的显示，子组件只负责渲染内容和通知父组件关闭。

修改子组件AccountEditModal：

export default class AccountEditModal extends React.Component {
  constructor(props, context) {
    super(props);
    this.state = {
      // 移除showModal，由父组件的show props控制
      uId: props.userId, // 从父组件props初始化
      userName: '',
    }
    this.handleClose = this.handleClose.bind(this);
  }

  // 当父组件userId变化时，同步更新子组件状态
  componentDidUpdate(prevProps) {
    if (prevProps.userId !== this.props.userId) {
      this.setState({ uId: this.props.userId });
    }
  }

  handleClose(e) {
    // 仅通知父组件关闭，由父组件控制Modal隐藏
    this.props.onClose();
    // 清空子组件的表单状态（如果需要）
    this.setState({ uId: null, userName: '' });
  }

  render() {
    return (
      <div>
        <Modal 
          show={this.props.show} 
          onHide={this.handleClose} 
          centered
        >
          <Modal.Header closeButton>
            <Modal.Title>Account Edit</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            {/* 你的表单内容 */}
          </Modal.Body>
          <Modal.Footer>
            <span 
              id='btnCloseAccountEdit' 
              onClick={this.handleClose} 
              className='btn btn-success'
            >
              Close
            </span>
          </Modal.Footer>
        </Modal>
      </div>
    )
  }
}

为什么这样修改能解决错误？ #

1. 消除双源状态：原来父子组件都维护Modal的显示状态，关闭时同时触发两次状态更新，导致React在状态过渡周期中收到新的更新请求，触发错误。现在由父组件完全控制Modal的显示/隐藏，状态更新流程单一。
2. 规范状态更新时机：子组件关闭时仅通知父组件执行状态更新，不会在自身状态更新的同时触发父组件的更新，避免了嵌套的状态更新操作。
3. 修复setState调用错误：父组件里合并了状态更新，避免了同步调用多次setState的问题。

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