如何将React useState初始值设为HTML <select>默认选中项的值

我想把React组件的初始状态设置为HTML 默认选中项的值。但每个{hit}对象的available_weights都不一样，没法直接用useState(hit.price_gram)来初始化状态。相关代码如下： "hit": { ... "available_weights": "[\"half gram\", \"gram\"]", "price_gram": "44.0", "price_half_gram": "22.0", "price_ounce": null, ... } function Price({ hit }) { const [price, setPrice] = useState() // 需要把初始值设为.map()里默认选中项的值 const handleChange = (e) => setPrice(e.target.value) return ( <> <span>{price}</span> <select onChange={handleChange}> {hit.available_weights.map((weight, index) => { const weight_price = Object.keys(hit).filter(key => key === "price_" + weight.split(' ').join('_')) return ( <option key={weight} value={hit[weight_price]} selected={index === 0}> {weight} </option> ) })} </select> </> ) } 解决方案 # 核心思路是先解析available_weights为数组，再获取第一个选项对应的价格作为初始状态，同时把select改成受控组件避免状态不一致： 解析JSON字符串数组：原数据里的available_weights是JSON格式的字符串，必须用JSON.parse转换成真正的数组才能遍历。 获取初始价格：取数组第一个重量值，生成对应的价格键名（比如half gram转成price_half_gram），从hit中拿到对应价格作为useState的初始值。 改用受控组件：给select绑定value属性到price状态，不需要手动给option加selected，React会自动匹配选中项，避免状态不同步。 过滤无效选项：如果某个重量对应的价格为null（比如示例中的ounce），直接跳过渲染该选项。 修改后的完整代码： function Price({ hit }) { // 解析JSON字符串为可遍历的数组 const availableWeights = JSON.parse(hit.available_weights); // 获取第一个重量对应的价格键名 const firstWeight = availableWeights[0]; const firstPriceKey = `price_${firstWeight.split(' ').join('_')}`; // 用第一个选项的价格初始化状态 const [price, setPrice] = useState(hit[firstPriceKey]); const handleChange = (e) => setPrice(e.target.value); return ( <> <span>{price}</span> {/* 受控组件：通过value绑定状态，自动同步选中项 */} <select value={price} onChange={handleChange}> {availableWeights.map((weight) => { const priceKey = `price_${weight.split(' ').join('_')}`; const weightPrice = hit[priceKey]; // 跳过价格为null的无效选项 if (!weightPrice) return null; return ( <option key={weight} value={weightPrice}> {weight} </option> ); })} </select> </> ); } 内容的提问来源于stack exchange，提问作者greendalf