React函数组件中如何用预设值自动填充表单并触发提交？

在函数组件里用useReducer管理表单状态时，一键提交功能先设置预设值再调用submitForm会遇到异步更新的竞态问题——submitForm拿到的是更新前的旧state值。类组件可以靠setState的回调解决，但函数组件得换思路，下面是几个实用方案：

方案一：直接传递预设值给提交函数（最推荐） #

核心逻辑：一键提交时没必要等state更新完再提交，直接把预设值作为参数传给submitForm，同时按需更新state保持UI同步。既绕开了异步问题，还少一次渲染。

修改后的代码：

function Exhibit(props) {
  const initialForm = {/* 初始表单值 */};
  const [form, setForm] = useReducer((currForm, newValues) => ({...currForm, ...newValues}), initialForm);

  // 让submitForm支持自定义提交值，无参数则用当前state的form
  function submitForm(submitValues = form) {
    // 这里用submitValues发起AJAX请求
    console.log('提交内容:', submitValues);
  }

  function oneClickSubmit() {
    const presetValues = {
      name: '默认名称',
      email: 'default@example.com'
      // 其他预设字段
    };
    // 同步更新表单UI（可选，不需要的话可以删掉）
    setForm(presetValues);
    // 直接用预设值提交
    submitForm(presetValues);
  }

  return (
    <div>
      <form>
        {/* 受控表单示例 */}
        <input
          type="text"
          value={form.name}
          onChange={(e) => setForm({name: e.target.value})}
        />
        <input
          type="email"
          value={form.email}
          onChange={(e) => setForm({email: e.target.value})}
        />
      </form>
      <button onClick={submitForm}>提交</button>
      <button onClick={oneClickSubmit}>一键填充并提交</button>
    </div>
  );
}

• 优点：代码简洁，无异步等待问题，性能最优（避免了提交前的额外渲染）。
• 缺点：如果不需要表单UI显示预设值，可以直接删掉setForm调用，进一步简化。

方案二：用状态标记+useEffect触发提交 #

如果你的提交逻辑必须依赖state更新完成后的最新值（比如要结合其他衍生状态），可以加一个提交标记，靠useEffect监听标记触发提交。

代码示例：

import { useReducer, useEffect, useState } from 'react';

function Exhibit(props) {
  const initialForm = {/* 初始表单值 */};
  const [form, setForm] = useReducer((currForm, newValues) => ({...currForm, ...newValues}), initialForm);
  // 用这个状态标记是否需要触发提交
  const [shouldSubmit, setShouldSubmit] = useState(false);

  function submitForm() {
    // 这里用当前state的form发起请求
    console.log('提交内容:', form);
    // 提交完成后重置标记，避免重复触发
    setShouldSubmit(false);
  }

  function oneClickSubmit() {
    const presetValues = {
      name: '默认名称',
      email: 'default@example.com'
    };
    // 先更新表单状态
    setForm(presetValues);
    // 设置提交标记
    setShouldSubmit(true);
  }

  // 监听标记变化，触发提交
  useEffect(() => {
    if (shouldSubmit) {
      submitForm();
    }
  }, [shouldSubmit, form]);

  return (
    <div>
      <form>
        {/* 受控表单字段 */}
        <input
          type="text"
          value={form.name}
          onChange={(e) => setForm({name: e.target.value})}
        />
      </form>
      <button onClick={() => setShouldSubmit(true)}>提交</button>
      <button onClick={oneClickSubmit}>一键填充并提交</button>
    </div>
  );
}

• 优点：严格遵循React状态更新流程，确保提交时用的是最新state值，适合依赖state的复杂场景。
• 缺点：多维护一个状态变量，会额外触发一次渲染（状态更新后才提交）。

方案三：用useRef保存最新表单状态（不推荐） #

通过ref实时同步最新的form值，让submitForm直接读取ref的当前值，避开闭包带来的旧值问题。但这个方案需要手动同步ref和state，容易遗漏，所以不推荐作为首选。

代码示例：

import { useReducer, useRef, useEffect } from 'react';

function Exhibit(props) {
  const initialForm = {/* 初始表单值 */};
  const [form, setForm] = useReducer((currForm, newValues) => ({...currForm, ...newValues}), initialForm);
  const formRef = useRef(form);

  // 每次state更新后同步到ref
  useEffect(() => {
    formRef.current = form;
  }, [form]);

  function submitForm() {
    // 直接读取ref的最新值
    console.log('提交内容:', formRef.current);
  }

  function oneClickSubmit() {
    const presetValues = {
      name: '默认名称',
      email: 'default@example.com'
    };
    // 先更新state和ref
    setForm(presetValues);
    formRef.current = {...formRef.current, ...presetValues};
    // 现在调用submitForm就能拿到最新值
    submitForm();
  }

  return (
    <div>
      <form>
        {/* 受控表单字段，每次更新都要同步ref */}
        <input
          type="text"
          value={form.name}
          onChange={(e) => {
            const newName = e.target.value;
            setForm({name: newName});
            formRef.current = {...formRef.current, name: newName};
          }}
        />
      </form>
      <button onClick={submitForm}>提交</button>
      <button onClick={oneClickSubmit}>一键填充并提交</button>
    </div>
  );
}

• 优点：不受闭包限制，随时能获取最新状态。
• 缺点：需要手动同步ref和state，代码冗余，容易出错，仅适合特殊场景。

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