Next.js中使用useActionState时受控选择框提交后丢失值的问题

嘿，我来帮你搞定这个头疼的问题！你遇到的情况其实是因为同时维护了服务端返回的状态和本地组件状态，两者同步的时机没处理好导致的。

问题根源分析 #

你现在的代码里，用useActionState拿到服务端返回的state，又用useState维护了本地的group状态，虽然加了useEffect来同步两者，但useEffect是异步执行的：表单提交后，组件会先根据旧的本地状态渲染，这时候select的value还是旧的，甚至可能因为value和选项不匹配被浏览器自动重置到第一个选项；之后useEffect才会把服务端的新状态同步到本地，这就造成了视觉上的错误，甚至第二次提交时会把错误的值发出去。

解决方案 #

这里给你几个靠谱的解决办法，根据你的场景选就行：

方案一：用useLayoutEffect替代useEffect，提前同步状态

把原来的useEffect换成useLayoutEffect，它会在DOM更新之前执行，确保select的value在渲染时就已经是服务端返回的最新值，彻底避免旧值导致的重置问题。修改后的代码如下：

"use client";
import { useActionState, useLayoutEffect, useState } from "react";
import { saveFormData } from "./actions";

type FormState = { group: string };

const defaultState: FormState = { group: "Junior" };

export default function FormExample() {
  const [state, formAction] = useActionState(saveFormData, defaultState);
  const [group, setGroup] = useState(state.group);

  // 用useLayoutEffect替代useEffect，同步时机更早
  useLayoutEffect(() => {
    if (state.group !== group) {
      setGroup(state.group);
    }
  }, [state.group, group]);

  return (
    <form action={formAction}>
      <label>
        Group:
        <select
          name="group"
          value={group}
          onChange={(e) => setGroup(e.target.value)}
        >
          <option value="Mini">Mini (11–12)</option>
          <option value="Junior">Junior (12–14)</option>
          <option value="Senior">Senior (15+)</option>
        </select>
      </label>
      <button type="submit" className="btn">
        Submit
      </button>
    </form>
  );
}

方案二：去掉本地状态，直接用服务端状态作为受控值（适合简单场景）

如果你不需要在客户端做即时的额外逻辑（比如实时验证、联动其他组件），其实可以直接把select的value绑定到state.group，不需要维护本地状态。这样就完全避免了状态同步的问题，表单提交后state更新，select会直接显示正确的值：

"use client";
import { useActionState } from "react";
import { saveFormData } from "./actions";

type FormState = { group: string };

const defaultState: FormState = { group: "Junior" };

export default function FormExample() {
  const [state, formAction] = useActionState(saveFormData, defaultState);

  return (
    <form action={formAction}>
      <label>
        Group:
        <select
          name="group"
          value={state.group}
          onChange={(e) => {
            // 如果需要客户端即时反馈，可以在这里临时处理，比如更新一个展示用的状态
            // 但select的value始终由服务端state控制
          }}
        >
          <option value="Mini">Mini (11–12)</option>
          <option value="Junior">Junior (12–14)</option>
          <option value="Senior">Senior (15+)</option>
        </select>
      </label>
      <button type="submit" className="btn">
        Submit
      </button>
    </form>
  );
}

方案三：用useReducer统一管理状态（适合复杂表单）

如果你的表单逻辑比较复杂（比如有多个字段、复杂的状态联动），可以用useReducer来统一处理本地状态和服务端状态的同步，避免多个useState和useEffect带来的混乱：

"use client";
import { useActionState, useReducer } from "react";
import { saveFormData } from "./actions";

type FormState = { group: string };

const defaultState: FormState = { group: "Junior" };

function formReducer(state: FormState, action: { type: "SYNC_SERVER_STATE" | "UPDATE_LOCAL"; payload: FormState }) {
  switch (action.type) {
    case "SYNC_SERVER_STATE":
      return { ...state, ...action.payload };
    case "UPDATE_LOCAL":
      return { ...state, ...action.payload };
    default:
      return state;
  }
}

export default function FormExample() {
  const [serverState, formAction] = useActionState(saveFormData, defaultState);
  const [localState, dispatch] = useReducer(formReducer, serverState);

  // 同步服务端状态到本地
  useLayoutEffect(() => {
    dispatch({ type: "SYNC_SERVER_STATE", payload: serverState });
  }, [serverState]);

  return (
    <form action={formAction}>
      <label>
        Group:
        <select
          name="group"
          value={localState.group}
          onChange={(e) => dispatch({ type: "UPDATE_LOCAL", payload: { group: e.target.value } })}
        >
          <option value="Mini">Mini (11–12)</option>
          <option value="Junior">Junior (12–14)</option>
          <option value="Senior">Senior (15+)</option>
        </select>
      </label>
      <button type="submit" className="btn">
        Submit
      </button>
    </form>
  );
}

注意事项 #

千万别用JavaScript选择器直接操作DOM！这会破坏React的受控组件模型，反而容易引入更多难以排查的问题，用上面的React状态管理方案就足够了。

内容来源于stack exchange