React子组件触发表单提交时多次API请求及无限重渲染问题求助

你遇到的无限重渲染和大量API请求问题，核心原因是直接在组件渲染阶段执行状态更新与表单提交逻辑，导致状态变化触发重新渲染，形成循环往复的执行链。以下是两种无需迁移handleSubmit逻辑的解决方案：

方案一：用useEffect监听外部提交信号 #

通过useEffect监听状态变化，仅在状态触发时执行一次提交逻辑，避免渲染阶段的循环执行。

1. 父组件（App.jsx）修改 #

添加外部提交状态与触发函数，传递给子组件：

import { useState } from 'react';

function App() {
  const [externalFormSubmit, setExternalFormSubmit] = useState(false);
  // 其他已有状态：newSubstance, substances...
  // 其他已有函数：addSubstanceToHistory, deleteSubstance...

  // 触发外部提交的函数
  const triggerFormSubmit = () => {
    setExternalFormSubmit(true);
  };

  // 重置外部提交状态的函数
  const resetExternalSubmit = () => {
    setExternalFormSubmit(false);
  };

  return (
    <>
      <SubstanceForm 
        addSubstanceToHistory={addSubstanceToHistory} 
        newSubstance={newSubstance} 
        setNewSubstance={setNewSubstance}
        externalFormSubmit={externalFormSubmit}
        resetExternalSubmit={resetExternalSubmit}
      />  
      <PreviousSearches 
        substances={substances} 
        deleteSubstance={deleteSubstance} 
        setNewSubstance={setNewSubstance}
        triggerFormSubmit={triggerFormSubmit}
      />
    </>
  )
}

2. SubstanceForm组件修改 #

用useEffect监听外部提交信号，仅在信号触发时执行提交：

import { useEffect } from 'react';

const SubstanceForm = ({ 
  addSubstanceToHistory, 
  newSubstance, 
  setNewSubstance,
  externalFormSubmit,
  resetExternalSubmit
}) => {
  const handleSubmit = async (e) => {
    // 兼容手动提交和外部触发两种场景
    e?.preventDefault();
    
    // 保留你原有的API请求、结果处理、错误捕获逻辑
    try {
      // 示例API请求逻辑
      const res = await fetch(`/api/substance?cas=${newSubstance}`);
      const data = await res.json();
      // 处理数据、添加到历史记录等操作
      addSubstanceToHistory(data);
    } catch (err) {
      // 错误处理逻辑
      console.error('搜索失败:', err);
    }
  };

  // 监听外部提交信号
  useEffect(() => {
    if (externalFormSubmit) {
      handleSubmit();
      // 立即重置状态，避免重复触发
      resetExternalSubmit();
    }
  }, [externalFormSubmit, resetExternalSubmit, handleSubmit]);

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={newSubstance} 
        onChange={(e) => setNewSubstance(e.target.value)}
        placeholder="输入CAS编号"
      />
      <button type="submit">搜索</button>
    </form>
  );
};

3. PreviousSearches组件修改 #

点击历史项时，填充CAS编号并触发外部提交：

const PreviousSearches = ({ substances, deleteSubstance, setNewSubstance, triggerFormSubmit }) => {
  const reRunSearch = (casNumber) => {
    // 填充CAS编号到表单
    setNewSubstance(casNumber);
    // 触发外部提交
    triggerFormSubmit();
  };

  return (
    <div className="previous-searches">
      <h3>历史搜索</h3>
      <ul>
        {substances.map(item => (
          <li key={item.cas}>
            <span onClick={() => reRunSearch(item.cas)}>{item.cas}</span>
            <button onClick={() => deleteSubstance(item.cas)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

方案二：用useRef直接调用子组件提交方法 #

通过forwardRef和useImperativeHandle暴露子组件的提交方法，无需额外状态，逻辑更直接。

1. SubstanceForm组件修改 #

用forwardRef包裹组件，暴露提交方法：

import { forwardRef, useImperativeHandle } from 'react';

const SubstanceForm = forwardRef(({ 
  addSubstanceToHistory, 
  newSubstance, 
  setNewSubstance
}, ref) => {
  const handleSubmit = async (e) => {
    e?.preventDefault();
    // 保留你原有的API请求与处理逻辑
    try {
      const res = await fetch(`/api/substance?cas=${newSubstance}`);
      const data = await res.json();
      addSubstanceToHistory(data);
    } catch (err) {
      console.error('搜索失败:', err);
    }
  };

  // 向父组件暴露submit方法
  useImperativeHandle(ref, () => ({
    submit: () => handleSubmit()
  }));

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={newSubstance} 
        onChange={(e) => setNewSubstance(e.target.value)}
        placeholder="输入CAS编号"
      />
      <button type="submit">搜索</button>
    </form>
  );
});

2. 父组件（App.jsx）修改 #

创建表单Ref，传递给子组件并定义触发函数：

import { useRef } from 'react';

function App() {
  const formRef = useRef(null);
  // 其他已有状态与函数...

  const handleReRunSearch = (casNumber) => {
    setNewSubstance(casNumber);
    // 调用子组件的submit方法
    formRef.current?.submit();
  };

  return (
    <>
      <SubstanceForm 
        ref={formRef}
        addSubstanceToHistory={addSubstanceToHistory} 
        newSubstance={newSubstance} 
        setNewSubstance={setNewSubstance}
      />  
      <PreviousSearches 
        substances={substances} 
        deleteSubstance={deleteSubstance} 
        setNewSubstance={setNewSubstance}
        onReRunSearch={handleReRunSearch}
      />
    </>
  )
}

3. PreviousSearches组件修改 #

点击历史项时调用父组件的触发函数：

const PreviousSearches = ({ substances, deleteSubstance, onReRunSearch }) => {
  return (
    <div className="previous-searches">
      <h3>历史搜索</h3>
      <ul>
        {substances.map(item => (
          <li key={item.cas}>
            <span onClick={() => onReRunSearch(item.cas)}>{item.cas}</span>
            <button onClick={() => deleteSubstance(item.cas)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

方案对比 #

• 方案一：符合React单向数据流原则，状态变化可追踪，适合复杂场景。
• 方案二：无需额外状态，代码更简洁，适合简单的跨组件调用场景。

两种方案都能避免无限重渲染问题，且无需迁移你已有的handleSubmit逻辑。

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