React单选框defaultChecked在useEffect更新状态时失效问题咨询

核心原因：defaultChecked是非受控组件的初始化属性 #

defaultChecked仅在组件首次挂载渲染时生效，负责设置单选框/复选框的初始选中状态。一旦组件完成首次渲染，React就不会再通过这个属性更新DOM的选中状态——因为非受控组件的状态由DOM自身维护，React只承担初始化的职责，后续状态变化需要直接操作DOM或转为受控组件模式。

结合你的代码具体分析 #

1. 首次渲染阶段，defaultValue初始值为1，defaultChecked={defaultValue === 1}会让value=1的单选框被默认选中；
2. 组件首次渲染完成后，useEffect触发并调用setDefaultValue(2)，导致组件重新渲染；
3. 重新渲染时，尽管defaultValue已变为2，但React不会再读取defaultChecked的值去更新DOM——这个属性的作用在首次渲染时就已完成，因此页面上的单选框仍保持首次选中的状态。

正确的状态同步方式：转为受控组件（你已采用的方案） #

要让选中状态跟随React state实时变化，必须使用受控组件模式：用checked属性绑定state，同时添加onChange事件处理函数来更新state。这样每次state更新，React都会同步修改checked属性，从而正确同步DOM的选中状态。

示例代码：

import React from 'react';

export function App(props) {
  const [selectedValue, setSelectedValue] = React.useState(1);

  React.useEffect(() => {
    setSelectedValue(2);
  }, []);

  const handleChange = (e) => {
    setSelectedValue(Number(e.target.value));
  };

  return (
    <div className='App'>
      <input 
        type="radio" 
        name="whatever" 
        value="0" 
        checked={selectedValue === 0}
        onChange={handleChange}
      />Value 0
      <input 
        type="radio" 
        name="whatever" 
        value="1" 
        checked={selectedValue === 1}
        onChange={handleChange}
      />Value 1
      <input 
        type="radio" 
        name="whatever" 
        value="2" 
        checked={selectedValue === 2}
        onChange={handleChange}
      />Value 2
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Kevin Dean