React中父组件触发多个子组件发起POST请求的最优方案咨询

方案1：声明式信号触发（优先推荐） #

你提到的useEffect配合触发标记的方案不属于API滥用，恰恰是符合React声明式编程范式的实现，唯一需要优化的是不要用布尔值作为触发标记，避免二次点击无法触发的问题，改为用递增数字或时间戳即可：

父组件逻辑 #

const [sendSignal, setSendSignal] = useState(0);

// 导出按钮点击回调
const handleExport = () => {
  setSendSignal(prev => prev + 1);
};

// 渲染表格行时传递信号
return userList.map(user => (
  <TableRow 
    key={user.id} 
    userData={user}
    sendSignal={sendSignal}
  />
))

子组件逻辑 #

const TableRow = ({ userData, sendSignal }) => {
  const [requestStatus, setRequestStatus] = useState('idle'); // idle/pending/success/error

  const sendPostRequest = async () => {
    setRequestStatus('pending');
    try {
      await fetch('/api/createUser', {
        method: 'POST',
        body: JSON.stringify(userData)
      });
      setRequestStatus('success');
    } catch (e) {
      setRequestStatus('error');
    }
  };

  React.useEffect(() => {
    // 初始值为0时不触发，避免页面加载自动发请求
    if (sendSignal > 0) {
      sendPostRequest();
    }
  }, [sendSignal]);

  // 渲染行内容，根据requestStatus展示不同状态
};

这个方案代码量最小，没有命令式操作，完全符合React数据流规则，适合不需要单独控制某一行请求的普通业务场景。

方案2：useImperativeHandle 命令式触发 #

如果你有单独控制某一行请求的需求（比如单独重试某一行失败的请求），用forwardRef+useImperativeHandle也完全合理，不属于过度复杂的实现，React官方只是不推荐滥用命令式操作，这种明确需要触发子组件行为的场景完全适配：

子组件逻辑 #

const TableRow = React.forwardRef(({ userData }, ref) => {
  const [requestStatus, setRequestStatus] = useState('idle');

  const sendPostRequest = async () => {
    // 同上请求逻辑
  };

  // 暴露方法给父组件
  useImperativeHandle(ref, () => ({
    triggerRequest: sendPostRequest
  }));

  // 渲染行内容
});

父组件逻辑 #

const rowRefs = useRef([]);

const handleExport = () => {
  rowRefs.current.forEach(ref => ref?.triggerRequest());
};

return userList.map((user, index) => (
  <TableRow 
    key={user.id} 
    userData={user}
    ref={el => rowRefs.current[index] = el}
  />
))

方案3：父组件统一管理请求 #

如果你需要做全局的请求统计、批量重试、全局 loading 等能力，这个方案反而更优，状态统一维护在父组件，仅将状态透传给子组件展示，符合单一数据源原则，也降低了组件间的耦合度。

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