使用Recoil时Ionic切换开关互相影响的问题排查

我有两个Ionic切换开关，搭配Recoil使用时互相影响。初始控制台打印显示二者默认值正确，但将一个从关闭切换为开启时，原本开启的那个会变为关闭，且控制台显示undefined，无法同时开启两个开关却可同时关闭，请问哪里操作出错了？

Atom.ts #

import { atom } from "recoil";

interface Settings {
  showCoords?: boolean;
  showAnimations?: boolean;
}

const defaultSettings: Settings = {
  showCoords: false,
  showAnimations: true,
};

export const SettingsState = atom<Settings>({
  key: "settingsState",
  default: defaultSettings,
});

Settings.tsx #

const [mySettings, setMySettings] = useRecoilState(SettingsState);

const thisCoords = mySettings.showCoords;
const thisAnimations = mySettings.showAnimations;

<ion-item>
  <ion-label>Vis koordinater</ion-label>
  <ion-toggle
    id="showCoords"
    name="showCoords"
    checked={thisCoords}
    onClick={() => setMySettings({ showCoords: !thisCoords })}
  ></ion-toggle>
</ion-item>

<ion-item>
  <ion-label>Vis animationer</ion-label>
  <ion-toggle
    id="showAnimations"
    name="showAnimations"
    checked={thisAnimations}
    onClick={() => setMySettings({ showAnimations: !thisAnimations })}
  ></ion-toggle>
</ion-item>

问题核心 #

调用setMySettings时直接传入仅包含单个属性的新对象，会完全替换Recoil atom中的原有状态，而非合并属性。比如点击showCoords开关时，新状态只保留showCoords，原有的showAnimations会被移除，导致mySettings.showAnimations变为undefined，对应开关的checked值被视为false，所以原本开启的开关会关闭。

修复方案 #

更新状态时需要保留原有属性，两种常用方式：

1. 函数式更新（推荐）：通过回调获取当前状态，合并新属性，避免闭包导致的状态过期问题：

// 修改showCoords的点击事件
onClick={() => setMySettings(prev => ({ ...prev, showCoords: !prev.showCoords }))}

// 修改showAnimations的点击事件
onClick={() => setMySettings(prev => ({ ...prev, showAnimations: !prev.showAnimations }))}

2. 直接展开原有状态：手动展开当前mySettings对象，再覆盖目标属性：

// 修改showCoords的点击事件
onClick={() => setMySettings({ ...mySettings, showCoords: !thisCoords })}

// 修改showAnimations的点击事件
onClick={() => setMySettings({ ...mySettings, showAnimations: !thisAnimations })}

额外优化 #

给Settings接口的属性去掉可选标记?，因为默认值已明确赋值，避免出现undefined：

interface Settings {
  showCoords: boolean;
  showAnimations: boolean;
}

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