React中如何为map渲染的dropdown下拉框设置默认选中值

问题原因 #

你当前的<select>属于未绑定值的半受控组件，浏览器会默认选中第一个<option>元素，无法和传入的country状态做同步，所以就算设置了初始值也不会生效。

修改步骤 #

1. 给<select>标签添加value属性，绑定传入的country.code，让下拉框完全和country状态同步，变成标准受控组件
2. 确保父组件中country状态的初始值设置为印度的对应对象：{code: 'in', name: 'India'}

修改后的组件代码 #

export default function NavBar({ setUserSearch, country, setCountry }) {
    const handleCountryChange = (e) => {
        // 也可以优化成从countries数组里匹配对应name，避免取innerText的潜在问题
        const selectedCountry = countries.find(item => item.code === e.target.value)
        setCountry(selectedCountry)
    }

    return (
        <select 
            className="country_dropdown mx-3 py-1 px-1 text-dark" 
            onChange={handleCountryChange}
            value={country.code} // 新增绑定value的代码
        > 
            {countries.map(country => {
                 return <option value={country.code} key={country.code}>
                     {country.name} 
                 </option>
               })
             }
        </select>
    ) 
}

额外优化说明 #

原来的handleCountryChange里直接取e.target.innerText可能会有空格、特殊字符等问题，改成从countries数组里根据选中的code匹配对应的完整国家对象，取值更准确。

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