React.js中如何更新状态对象：除选中值外其余设为相同值？

你的代码逻辑能正常运行，但存在重复代码，后续新增选项时还要反复修改if-else分支，这里提供两种更优的实现思路：

方式一：动态生成状态对象 #

利用对象遍历方法，根据选中的key自动生成新状态，避免重复的赋值逻辑：

const [state, setState] = useState({
    one: false,
    two: false,
    three: false
});

const showModal = (e) => {
    const selected = e.target.value;
    // 遍历原状态的所有键，生成新状态：选中的为true，其余为false
    const newState = Object.fromEntries(
        Object.keys(state).map(key => [key, key === selected])
    );
    setState(newState);
    modalOpen(true);
};

这种方式的优势在于，后续新增four这类属性时，只需要在初始state里添加字段，showModal函数完全不用修改，扩展性更强。

方式二：简化状态结构（更推荐） #

既然是单选场景，没必要用多个布尔值存储状态，直接用一个变量存当前选中的key即可，逻辑会更简洁：

// 初始设为null表示未选中，也可默认选中某一项比如'one'
const [selectedKey, setSelectedKey] = useState(null);

const showModal = (e) => {
    setSelectedKey(e.target.value);
    modalOpen(true);
};

// 使用状态时，判断某选项是否选中：selectedKey === 'one'

这种方式从根源上简化了状态设计，代码量更少，维护成本更低，后续新增选项只需要在UI层面处理，状态逻辑完全不用调整。

内容的提问来源于stack exchange，提问作者Rohit Verma