ReactJS如何根据数据库返回值设置<select>选项默认选中？

云上老周

2026-8-6

在React中设置Select默认选中值的正确方式

针对你的场景，从PHP转React的核心是理解React处理表单控件的受控组件逻辑，和PHP原生DOM操作思路不同。下面直接给你解决方法：

1. 修正数据状态初始化

你获取的是单个用户数据（/user/${id}），所以data的初始值应该是空对象而非数组，否则data.is_active会返回undefined：

const { id } = useParams();
const [data, setData] = useState({}); // 改为空对象
const [errorMessage, setErrorMessage] = useState(''); // 错误信息用字符串更合理

axios.get(`http://localhost:5666/user/${id}`).then((result) => {
  if (result.data.message === 'OK') {
    setData(result.data.data);
  } else {
    setErrorMessage(result.data.message);
  }
});

2. 用受控组件实现Select默认选中（推荐）

React中推荐用受控组件处理表单，直接给<select>绑定value属性，无需给每个<option>单独设置selected：

<select 
  className="form-control" 
  name="is_active"
  // 绑定后端返回的is_active值，自动匹配对应选项
  value={data.is_active}
  // 如需修改状态，添加onChange更新数据
  onChange={(e) => {
    // 将字符串value转为数字，和后端数据类型保持一致
    setData({ ...data, is_active: parseInt(e.target.value) });
  }}
>
  <option value="1">Active</option>
  <option value="0">Inactive</option>
</select>

3. 非受控组件方式（仅设置默认值，无需实时更新）

如果仅需设置初始默认值，不需要实时绑定状态，可以用defaultValue：

<select 
  className="form-control" 
  name="is_active"
  defaultValue={data.is_active}
>
  <option value="1">Active</option>
  <option value="0">Inactive</option>
</select>

你之前写法无效的原因

变量名混乱：item.is_active、optionsState、option.value等变量未正确定义，导致选中判断逻辑失效；
错误使用selected属性：React受控组件模式下，<select>的value优先级高于<option>的selected，单独给option加selected不会生效；
初始状态类型错误：用数组[]存储单个用户对象，导致data.is_active无法正确获取。