React Hook中如何设置默认选中值：加载与提交时的状态处理

Great question! Right now, your category state starts as an empty string, so if the user submits the form without touching the dropdown, it stays empty. Here are two solid solutions to fix this:

Solution 1: Set Initial State to the First Category (Recommended) #

This approach pre-selects the first option in your dropdown by default, giving the user clear visual feedback and ensuring category has a valid value from the start.

First, update your state initialization to use the first value in categoryList (with a fallback for empty lists):

// Initialize with first category value if available, else empty string
const [category, setCategory] = useState(categoryList.length > 0 ? categoryList[0].value : '');

Then, make sure your <select> element is fully controlled by adding the value prop (you were passing value to the Options component before, but it belongs on the <select> itself):

<select onChange={e => setCategory(e.target.value)} value={category}>
  <Options options={categoryList} />
</select>

Your Options component doesn't need the value prop anymore since the controlled <select> handles which option is selected.

Solution 2: Fallback to First Category in Submit Handler #

If you don't want a default option pre-selected, but still want category to have a valid value when the user submits without changing the dropdown, add a fallback in your submit function:

const handleBusinessInfoSubmit = (e) => {
  try {
    e.preventDefault();
    // Use selected category, or fall back to first option if available
    const finalCategory = category || (categoryList.length > 0 ? categoryList[0].value : '');
    console.log("category selected is " + finalCategory);
    // Optional: Update the state to reflect this fallback value
    setCategory(finalCategory);
  } catch {
    console.log("something went wrong!");
  }
};

This way, even if the user didn't select anything, finalCategory will use the first option's value (or stay empty if there are no categories).

Quick Note on Empty Category Lists #

Both solutions include checks for an empty categoryList to avoid errors. If you know categoryList will always have at least one item, you can simplify the checks, but it's good practice to handle edge cases!

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