React：如何根据数据库值设置单选框的选中状态（编辑场景）

你的代码里有两个关键问题需要修正，才能实现从数据库取值并设置单选按钮选中的效果：

1. 误用副作用钩子：你把useState当成了副作用钩子使用，应该换成useEffect来处理组件挂载时的数据获取逻辑
2. 缺少选中状态绑定：单选按钮需要通过checked属性和状态值关联，才能根据状态自动切换选中状态

修正后的完整代码 #

import { useState, useEffect } from 'react';

export default function UpdateRadioSelection(){
  // 初始化状态，若能同步获取数据库值也可直接设为初始值
  const [radioValue, setRadioValue] = useState("");

  // 组件首次挂载时从数据库获取值并更新状态
  useEffect(()=>{
    // 替换为实际数据库请求，比如axios.get('/api/order-type')
    const fetchedValue = "pick"; // 模拟从数据库获取的值
    setRadioValue(fetchedValue);
  }, [])

  // 单选按钮切换时更新状态
  const changeSelection = (e)=>{
    setRadioValue(e.target.value);
  }

  return(
    <div>
      <input 
        type="radio" 
        id="delivery" 
        name="orderType" 
        value="delivery" 
        required 
        onChange={changeSelection}
        checked={radioValue === "delivery"} // 绑定选中状态
      />
      <label htmlFor="delivery">Delivery</label>
      
      <input 
        type="radio" 
        id="pick" 
        name="orderType" 
        value="pick" 
        onChange={changeSelection}
        checked={radioValue === "pick"} // 绑定选中状态
      />
      <label htmlFor="pick">Pick Up</label>
    </div>
  )
}

关键说明 #

• useEffect的作用：空数组依赖[]确保该逻辑仅在组件首次挂载时执行一次，适配从数据库加载初始值的编辑场景
• checked属性绑定：每个单选按钮通过radioValue === 自身value的判断，决定是否处于选中状态。状态更新时React会自动重新渲染，切换选中的按钮
• 状态一致性：changeSelection函数在用户切换单选按钮时更新状态，保证UI展示和内部状态始终同步

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