// ? 錯(cuò)誤：直接修改 prevState（可變）
async function loginAction(prevState, formData) {
  prevState.error = '用戶名不能為空'; // 直接修改原對(duì)象
  return prevState; // 返回同一個(gè)引用，React 認(rèn)為狀態(tài)未變
}

// ? 正確：返回新?tīng)顟B(tài)（不可變）
async function loginAction(prevState, formData) {
  return { ...prevState, error: '用戶名不能為空' }; // 淺拷貝生成新對(duì)象
}

// ? 錯(cuò)誤
function LoginForm() {
  const [count, setCount] = useState(0);
  const [state, formAction] = useActionState(async (prev) => {
    setCount(count + 1); // 直接修改組件狀態(tài)，易導(dǎo)致不一致
    return { ...prev, success: true };
  }, { success: false });
}

// ? 正確：將需要的狀態(tài)合并到 useActionState 的 state 中
function LoginForm() {
  const [state, formAction] = useActionState(async (prev) => {
    return { ...prev, success: true, count: prev.count + 1 };
  }, { success: false, count: 0 });
}

// ? 錯(cuò)誤：未捕獲異常
async function fetchAction(prevState) {
  const res = await fetch('/api/data'); // 接口報(bào)錯(cuò)會(huì)直接拋出
  return { ...prevState, data: await res.json() };
}

// ? 正確：手動(dòng)捕獲異常并返回錯(cuò)誤狀態(tài)
async function fetchAction(prevState) {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error('請(qǐng)求失敗');
    return { ...prevState, data: await res.json(), error: null };
  } catch (err) {
    return { ...prevState, error: err.message, data: null }; // 錯(cuò)誤狀態(tài)返回
  }
}

// ? 推薦：按鈕禁用，避免連續(xù)提交
function SubmitButton() {
  const [state, formAction, isPending] = useActionState(fetchAction, initialState);
  return (
    <button type="submit" onClick={formAction} disabled={isPending}>
      {isPending ? '提交中...' : '提交'}
    </button>
  );
}

// ? 錯(cuò)誤：input 無(wú) name 屬性
<form action={formAction}>
  <input type="text" placeholder="用戶名" /> {/* 無(wú)法收集值 */}
  <button type="submit">提交</button>
</form>

// ? 正確：設(shè)置 name 屬性
<form action={formAction}>
  <input type="text" name="username" placeholder="用戶名" />
  <button type="submit">提交</button>
</form>

// ? 錯(cuò)誤：冗余的 preventDefault
<form onSubmit={(e) => {
  e.preventDefault(); // 多余，formAction 已處理
  formAction(e);
}}>...</form>

// ? 正確：直接綁定 action
<form action={formAction}>...</form>

// ? 錯(cuò)誤：SSR 時(shí) window 未定義
async function action(prevState) {
  const token = window.localStorage.getItem('token'); // 服務(wù)端執(zhí)行時(shí)報(bào)錯(cuò)
  return { ...prevState, token };
}

// ? 正確：區(qū)分客戶端/服務(wù)端
async function action(prevState) {
  let token = '';
  if (typeof window !== 'undefined') { // 僅客戶端執(zhí)行
    token = window.localStorage.getItem('token');
  }
  return { ...prevState, token };
}