React单选按钮组状态管理优化：选中一个后自动设其他为false

问题背景 #

在React项目中使用useState管理一组单选按钮状态，要求选中某一按钮时其余自动设为false，当前用多个if语句实现，希望有更高效的写法。现有代码如下：

const [trans,setTrans] = useState({
  expense : false, income : false,
  lend : false}
);
const setRadio = (event)=>{
  const buttonName = event.target.id;
  if(buttonName==="expense"){
    setTrans((prev) =>({...prev,[buttonName]:true,income:false,lent:false}));
  }
  if(buttonName==="income"){
    setTrans((prev) =>({...prev,[buttonName]:true,expense:false,lent:false}));
  }
  if(buttonName==="lent"){
    setTrans((prev) =>({...prev,[buttonName]:true,income:false,expense:false}));
  }
}

优化方案 #

方案一：简化状态结构（推荐） #

单选按钮的核心是互斥选中，不需要用对象存储每个按钮的布尔值，只需记录当前选中的按钮ID即可，代码更简洁高效：

// 初始状态设为空，代表未选中任何按钮
const [selectedTrans, setSelectedTrans] = useState('');

const setRadio = (event) => {
  setSelectedTrans(event.target.id);
};

// 单选按钮的checked属性写法示例
<input 
  type="radio" 
  id="expense" 
  checked={selectedTrans === 'expense'} 
  onChange={setRadio} 
/>

这种方式彻底消除了冗余的状态判断，逻辑清晰，维护成本低。

方案二：保留对象状态的简化写法 #

如果因为业务需求必须保留原有的对象结构，可以通过以下方式替代多个if：

写法1：直接生成新对象

const [trans, setTrans] = useState({
  expense: false,
  income: false,
  lend: false
});

const setRadio = (event) => {
  const buttonName = event.target.id;
  // 直接生成所有键值对，选中的设为true，其余为false
  setTrans({
    expense: buttonName === 'expense',
    income: buttonName === 'income',
    lend: buttonName === 'lend'
  });
};

写法2：动态遍历对象键（适合按钮数量较多的场景）

const setRadio = (event) => {
  const buttonName = event.target.id;
  setTrans(prevState => 
    Object.fromEntries(
      Object.keys(prevState).map(key => [key, key === buttonName])
    )
  );
};

注意点 #

现有代码存在一处bug：状态对象中的键是lend，但if判断里写的是lent，这会导致选中ID为lent的按钮时，lend的状态不会被设为false，需要统一命名。

内容的提问来源于stack exchange，提问作者Shekhar lohach