React表单提交：Hook设置完成后提交及useEffect依赖警告解决

问题分析 #

原方案中useEffect因缺失formData依赖触发警告，若添加formData到依赖数组，会导致用户编辑表单时频繁触发effect，违背仅在提交时执行的需求。核心矛盾是：需要获取提交时刻的formData，但不能让formData的日常变化触发useEffect。

方案一：用状态存储提交意图与对应表单数据 #

将提交意图从布尔值改为存储提交时的formData，既规避formData的依赖问题，又能保证提交的是用户点击瞬间的表单数据。

代码实现 #

1. 修改提交意图的状态：

const [submitIntent, setSubmitIntent] = useState(null); // null表示无提交意图，有值时存储提交时刻的formData

2. 更新提交点击处理函数：

const handleSubmit = () => {
  // 存储当前表单数据作为提交意图
  setSubmitIntent(formData);
  if (!userData) {
    setShowConnectModal(true);
  }
};

3. 调整useEffect逻辑：

useEffect(() => {
  async function performSubmit() {
    // 仅当有提交意图且用户数据已存在时执行提交
    if (submitIntent && userData) {
      // 清除提交意图，避免重复触发
      setSubmitIntent(null);
      await submit(submitIntent, userData);
    }
  }
  performSubmit();
}, [submitIntent, userData]); // 仅依赖提交意图和用户数据，避免formData变化触发

4. 模态框代码保持不变：

{showConnectModal && (
  <ConnectModal
    setUserData={setUserData}
  />
)}

优势 #

• 完全符合React状态管理逻辑，无需额外使用ref
• 依赖数组清晰，仅在提交意图触发或用户数据更新时执行提交
• 确保提交的是用户点击提交瞬间的表单数据，避免后续编辑影响提交内容

方案二：用useRef缓存提交时刻的表单数据 #

通过useRef存储点击提交时的formData，避免将其加入useEffect依赖数组。

代码实现 #

1. 声明ref用于缓存表单数据：

const submitFormDataRef = useRef(null);

2. 更新提交点击处理函数：

const handleSubmit = () => {
  // 缓存当前表单数据
  submitFormDataRef.current = formData;
  setPendingSubmitIntent(true);
  if (!userData) {
    setShowConnectModal(true);
  }
};

3. 调整useEffect逻辑：

useEffect(() => {
  async function performSubmit() {
    if (pendingSubmitIntent && userData) {
      setPendingSubmitIntent(false);
      // 使用缓存的提交时刻表单数据
      await submit(submitFormDataRef.current, userData);
    }
  }
  performSubmit();
}, [pendingSubmitIntent, userData]); // 无需依赖formData

优势 #

• 改动较小，适合快速调整原代码
• ref的变化不会触发组件重渲染或useEffect执行

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