React19 useActionState的注意事项

// ❌ 错误：直接修改 prevState（可变）
async function loginAction(prevState, formData) {
  prevState.error = '用户名不能为空'; // 直接修改原对象
  return prevState; // 返回同一个引用，React 认为状态未变
}

// ✅ 正确：返回新状态（不可变）
async function loginAction(prevState, formData) {
  return { ...prevState, error: '用户名不能为空' }; // 浅拷贝生成新对象
}

// ❌ 错误
function LoginForm() {
  const [count, setCount] = useState(0);
  const [state, formAction] = useActionState(async (prev) => {
    setCount(count + 1); // 直接修改组件状态，易导致不一致
    return { ...prev, success: true };
  }, { success: false });
}

// ✅ 正确：将需要的状态合并到 useActionState 的 state 中
function LoginForm() {
  const [state, formAction] = useActionState(async (prev) => {
    return { ...prev, success: true, count: prev.count + 1 };
  }, { success: false, count: 0 });
}

// ❌ 错误：未捕获异常
async function fetchAction(prevState) {
  const res = await fetch('/api/data'); // 接口报错会直接抛出
  return { ...prevState, data: await res.json() };
}

// ✅ 正确：手动捕获异常并返回错误状态
async function fetchAction(prevState) {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error('请求失败');
    return { ...prevState, data: await res.json(), error: null };
  } catch (err) {
    return { ...prevState, error: err.message, data: null }; // 错误状态返回
  }
}

// ✅ 推荐：按钮禁用，避免连续提交
function SubmitButton() {
  const [state, formAction, isPending] = useActionState(fetchAction, initialState);
  return (
    <button type="submit" onClick={formAction} disabled={isPending}>
      {isPending ? '提交中...' : '提交'}
    </button>
  );
}

// ❌ 错误：input 无 name 属性
<form action={formAction}>
  <input type="text" placeholder="用户名" /> {/* 无法收集值 */}
  <button type="submit">提交</button>
</form>

// ✅ 正确：设置 name 属性
<form action={formAction}>
  <input type="text" name="username" placeholder="用户名" />
  <button type="submit">提交</button>
</form>

// ❌ 错误：冗余的 preventDefault
<form onSubmit={(e) => {
  e.preventDefault(); // 多余，formAction 已处理
  formAction(e);
}}>...</form>

// ✅ 正确：直接绑定 action
<form action={formAction}>...</form>

// ❌ 错误：SSR 时 window 未定义
async function action(prevState) {
  const token = window.localStorage.getItem('token'); // 服务端执行时报错
  return { ...prevState, token };
}

// ✅ 正确：区分客户端/服务端
async function action(prevState) {
  let token = '';
  if (typeof window !== 'undefined') { // 仅客户端执行
    token = window.localStorage.getItem('token');
  }
  return { ...prevState, token };
}