React组件中优雅处理多表单提交事件的方法

1. 提取通用处理函数 #

先封装一个通用的处理函数生成器，把重复的try/catch、update调用、提示逻辑都收拢进去，只需传入成功提示文本就能生成对应表单的提交处理器：

const createSubmitHandler = (successMsg) => async (data) => {
  try {
    await update(data);
    toastify(successMsg);
  } catch (err) {
    toastify(err);
  }
};

2. 重构表单配置与列表生成 #

将表单组件和对应的成功提示整合为配置数组，通过循环直接生成表单列表，彻底消除重复的handler定义：

function ProfilePage() {
  const { update } = useProfile();

  // 通用提交处理器生成器
  const createSubmitHandler = (successMsg) => async (data) => {
    try {
      await update(data);
      toastify(successMsg);
    } catch (err) {
      toastify(err);
    }
  };

  // 表单配置：组件 + 成功提示文本
  const formConfigs = [
    { Component: Fullname, successMsg: 'Fullname updated!' },
    { Component: Username, successMsg: 'Username updated!' },
    { Component: Password, successMsg: 'Password updated!' },
    { Component: PhoneNumber, successMsg: 'Phone number updated!' },
    { Component: Email, successMsg: 'Email updated!' },
  ];

  // 生成最终表单列表
  const formList = formConfigs.map(({ Component, successMsg }) => ({
    component: <Component onSubmit={createSubmitHandler(successMsg)} />
  }));

  return (
    // ...原返回内容
  );
}

可选优化：避免不必要重渲染 #

如果担心子组件因处理器函数频繁重建而重复渲染，可以用useCallback和useMemo做缓存：

import { useCallback, useMemo } from 'react';

function ProfilePage() {
  const { update } = useProfile();

  // 缓存处理器生成器，仅在update变化时重建
  const createSubmitHandler = useCallback((successMsg) => async (data) => {
    try {
      await update(data);
      toastify(successMsg);
    } catch (err) {
      toastify(err);
    }
  }, [update]);

  const formConfigs = [
    { Component: Fullname, successMsg: 'Fullname updated!' },
    { Component: Username, successMsg: 'Username updated!' },
    { Component: Password, successMsg: 'Password updated!' },
    { Component: PhoneNumber, successMsg: 'Phone number updated!' },
    { Component: Email, successMsg: 'Email updated!' },
  ];

  // 缓存表单列表，仅依赖变化时更新
  const formList = useMemo(() => formConfigs.map(({ Component, successMsg }) => ({
    component: <Component onSubmit={createSubmitHandler(successMsg)} />
  })), [createSubmitHandler]);

  return (
    // ...原返回内容
  );
}

这样重构后，新增表单只需在formConfigs里添加一项即可，代码冗余度大幅降低，维护成本也更小。

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