React <select>组件默认选中值不显示且提交为空的修复方法

当前代码存在两个问题：<select>组件不会自动选中默认选项，用户未手动选择accounttype字段时，提交表单会向服务器传递空值。可以通过以下方式修复：

1. 设置初始状态的默认值 #

在useState初始化formData时，将accounttype的默认值从空字符串改为你期望的默认选项值（比如"Saving"）。这样组件渲染时，<select>会自动匹配对应值的选项并选中。

修改后的状态初始化代码：

const [formData, setFormData] = useState({
  name: "",
  accounttype: "Saving", // 设置默认账户类型
  initialBalance: "",
  notes: "",
});

2. （可选）提交时的兜底校验 #

如果想进一步避免意外情况导致的空值提交，可以在handleSubmit中添加兜底逻辑，确保accounttype始终有有效值：

const handleSubmit = e => {
  e.preventDefault();
  const submitData = {
    ...formData,
    accounttype: formData.accounttype || "Saving"
  };
  createAccountAction(submitData);
};

修改后的完整代码 #

import { useContext, useState } from "react";
import { accountContext } from "../context/AccountContext/accountContext";

export default function AddAccount() {
  const { createAccountAction , error} = useContext(accountContext);
  const [formData, setFormData] = useState({
    name: "",
    accounttype: "Saving", // 设置默认账户类型
    initialBalance: "",
    notes: "",
  });

  //handle form change
  const handleChange = e => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = e => {
    e.preventDefault();
    // 可选兜底，确保不会提交空值
    const submitData = {
      ...formData,
      accounttype: formData.accounttype || "Saving"
    };
    createAccountAction(submitData);
  };
  
  return (
    <>
      <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
        <div className="sm:mx-auto sm:w-full sm:max-w-md">
          <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
            Add Account
          </h2>
        </div>

        <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
          <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
            <form className="space-y-6" onSubmit={handleSubmit}>
              <div>
                <label className="block text-sm font-medium text-gray-700">
                  Name
                </label>
                <div className="mt-1">
                  <input
                    value={formData.name}
                    onChange={handleChange}
                    name="name"
                    type="text"
                    className="block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
                  />
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700">
                  Initial Deposit ($)
                </label>
                <div className="mt-1">
                  <input
                    value={formData.initialBalance}
                    onChange={handleChange}
                    name="initialBalance"
                    type="number"
                    className="block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
                  />
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700">
                  Account Type
                </label>
                <select
                  name="accounttype"
                  value={formData.accounttype}
                  onChange={handleChange}
                  className="mt-1 block w-full border-2 rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
                >
                  <option value="Saving">Savings</option>
                  <option value="Current">Current</option>
                  <option value="Business">Business</option>
                  
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">
                  Add Note
                </label>
                <div className="mt-1">
                  <textarea
                    rows={4}
                    name="notes"
                    type="text"
                    value={formData.notes}
                    onChange={handleChange}
                    className="block w-full border-2 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                  />
                </div>
              </div>
              <div>
                <button
                  type="submit"
                  className="flex w-full  justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                >
                  Add New Transaction
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}

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