React中从公司弹窗返回后触发联系人列表重新获取的方案

我有两个Modal：添加联系人Modal和添加公司Modal。用户打开添加联系人Modal后，需要填写包含「所属公司」的表单；若系统中无目标公司，可点击按钮打开叠加在联系人Modal上的添加公司Modal。

用户填写公司信息并点击保存后，会通过POST请求提交到Spring Boot后端，后端返回数据库中的公司JSON对象。验证通过后弹出成功提示并关闭公司Modal，但此时联系人表单的公司自动补全框仍无法搜索到刚添加的公司——我原本以为联系人Modal重新渲染时会触发数据重新获取，但实际并未生效。

我曾尝试在return()函数中清空contactList，却引发了Too many re-renders错误。请问如何在从公司Modal返回后，触发联系人侧的公司列表重新获取？

核心解决方案 #

问题本质是联系人Modal未感知到公司数据的更新，需要在公司创建成功后主动触发数据刷新，而非依赖被动渲染。以下是具体实现方案：

1. 把公司列表状态提升到公共父组件 #

将公司列表的状态（如companyList）和数据获取方法（如fetchCompanyList）托管到两个Modal的共同父组件，通过props传递给子组件：

• 联系人Modal接收companyList用于自动补全展示
• 公司Modal接收onCompanyCreated回调，在保存成功后触发父组件的数据刷新

示例代码（React场景）：

// 父组件
function ContactManager() {
  const [companyList, setCompanyList] = useState([]);

  // 获取公司列表的方法
  const fetchCompanyList = async () => {
    const response = await fetch('/api/companies');
    const data = await response.json();
    setCompanyList(data);
  };

  // 初始化加载公司列表
  useEffect(() => {
    fetchCompanyList();
  }, []);

  // 公司创建成功后的回调
  const handleCompanyCreated = () => {
    fetchCompanyList(); // 主动重新拉取最新公司列表
  };

  return (
    <>
      <ContactModal 
        companyList={companyList}
        openCompanyModal={() => {/* 打开公司Modal的逻辑 */}}
      />
      <CompanyModal 
        onSuccess={handleCompanyCreated}
        onClose={() => {/* 关闭公司Modal的逻辑 */}}
      />
    </>
  );
}

2. 在公司Modal的保存逻辑中触发刷新 #

在公司Modal的POST请求成功后，先调用父组件传递的onSuccess回调，再关闭Modal：

// 公司Modal组件
function CompanyModal({ onSuccess, onClose }) {
  const handleSave = async () => {
    const formData = {/* 收集的公司表单数据 */};
    const response = await fetch('/api/companies', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    });

    if (response.ok) {
      alert('公司添加成功');
      onSuccess(); // 通知父组件刷新公司列表
      onClose();
    }
  };

  return (
    {/* Modal表单内容 */}
    <button onClick={handleSave}>保存</button>
  );
}

3. 避免在render中直接修改状态（解决无限重渲染错误） #

你之前在return()中修改contactList导致Too many re-renders，是因为render函数中直接触发状态更新会形成「更新→渲染→再更新」的循环。正确做法是将状态更新放在事件回调或useEffect的依赖触发逻辑中，绝对不要在render阶段直接修改状态。

4. 可选：用Context管理全局公司数据 #

如果组件层级较深，props传递回调过于繁琐，可以用React Context全局共享公司数据和刷新方法：

// 创建CompanyContext
const CompanyContext = createContext();

// 全局数据提供者
function CompanyProvider({ children }) {
  const [companyList, setCompanyList] = useState([]);

  const fetchCompanyList = async () => {
    const response = await fetch('/api/companies');
    const data = await response.json();
    setCompanyList(data);
  };

  useEffect(() => {
    fetchCompanyList();
  }, []);

  return (
    <CompanyContext.Provider value={{ companyList, fetchCompanyList }}>
      {children}
    </CompanyContext.Provider>
  );
}

// 联系人Modal中使用Context
function ContactModal() {
  const { companyList } = useContext(CompanyContext);
  // ...自动补全逻辑
}

// 公司Modal中使用Context
function CompanyModal({ onClose }) {
  const { fetchCompanyList } = useContext(CompanyContext);

  const handleSave = async () => {
    // ...保存逻辑
    if (response.ok) {
      alert('公司添加成功');
      await fetchCompanyList();
      onClose();
    }
  };
}

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