求助：仅当EditBank模态框显示时更新其子组件state的实现方案

我明白你的痛点：componentDidMount只在组件首次挂载时执行，而你的模态框一开始是隐藏的，等它真正打开时，这个钩子早就跑完了，根本没法同步最新的bankDetails。别担心，我们可以通过监听模态框的显示状态变化来实现需求，下面分两种组件类型给你具体实现：

类组件方案（适配你的现有代码） #

在EditBank子组件里，改用componentDidUpdate生命周期钩子，专门监听open属性的变化——当它从false变成true（也就是模态框被打开的瞬间），就把父组件传来的bankDetails同步到子组件的state中：

class EditBank extends React.Component {
  // 初始化表单状态
  state = {
    bankFormData: {}
  };

  componentDidUpdate(prevProps) {
    // 核心判断：模态框刚从隐藏切换为显示
    if (!prevProps.open && this.props.open) {
      // 同步父组件的bankDetail到子组件state
      this.setState({
        bankFormData: this.props.bankDetail
      });
    }
  }

  render() {
    return (
      {/* 你的模态框结构，open控制显示隐藏 */}
      <Modal open={this.props.open}>
        {/* 表单内容用this.state.bankFormData填充 */}
      </Modal>
    );
  }
}

逻辑拆解： #

• componentDidUpdate会在组件props/state更新后触发，我们通过对比prevProps.open和当前this.props.open，精准捕捉模态框被打开的时机。
• 只有在模态框首次被打开的瞬间才更新state，避免了父组件bankDetails变化但模态框没打开时的无效更新。

函数组件方案（如果后续重构用Hooks） #

要是你之后把组件改成函数式的，用useEffect钩子就能轻松实现同样的逻辑，监听open和bankDetail的变化，当open为true时同步数据：

import { useState, useEffect } from 'react';

const EditBank = ({ open, bankDetail }) => {
  const [bankFormData, setBankFormData] = useState({});

  useEffect(() => {
    // 模态框打开时，同步父组件数据
    if (open) {
      setBankFormData(bankDetail);
    }
  }, [open, bankDetail]); // 依赖这两个值，变化时触发

  return (
    <Modal open={open}>
      {/* 表单内容 */}
    </Modal>
  );
};

小优化建议： #

如果bankDetail会频繁更新，你可以在useEffect里加个判断，只有当bankDetail和当前bankFormData不一致时才更新，避免不必要的渲染：

useEffect(() => {
  if (open && JSON.stringify(bankDetail) !== JSON.stringify(bankFormData)) {
    setBankFormData(bankDetail);
  }
}, [open, bankDetail, bankFormData]);

为什么componentDidMount没用？ #

因为你的EditBank组件在父组件首次渲染时就已经挂载了（哪怕模态框是隐藏的），这时候componentDidMount只执行一次，而当时open是false，你不需要同步数据；等后来按钮点击让open变成true时，组件已经挂载完成，这个钩子不会再触发，自然没法同步最新的bankDetails。

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