如何在点击提交或加载时第一次设置默认选择值-React Hook

Question

这是我的类别状态

const [category, setCategory] = useState('');

这是表单元素：

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

在更改值时，我将获得所选的类别

const handleBusinessInfoSubmit = (e) => {
try{
e.preventDefault();
console.log("category selected is " +category);
}
catch{
console.log("something went wrong!");
}
} 

当用户不更改值并点击Submit时，如何设置Category状态

为了便于参考，以下是稍后在键值对中作为动态的类别列表

const categoryList = [
{
id: 1,
value: 'Public Services'
}, {
id: 2,
value: 'Automotive'
}
];
// generate select dropdown option list dynamically
function Options({ options }) {
return (
options.map(option => 
<option key={option.id} value={option.value}>                                   
{option.value}
</option>)
);
}

Answer 1

我可能会将默认初始值添加到useState，而不是'':

const [category, setCategory] = useState(categoryList[0]);

或者，如果数据是动态的，那么使用API中的值调用setCategory()会得到您想要的默认结果。

我希望这能有所帮助！