从其他原子 [Recoil] 派生默认动态值的最佳方法答案

【问题标题】：Best way to have a default dynamic value derived from other atom [Recoil]从其他原子 [Recoil] 派生默认动态值的最佳方法
【发布时间】：2022-11-29 11:25:18
【问题描述】：

我正在开发一个应用程序，它有侧边栏菜单。我有一个原子，它保存 /menu 的状态和一个原子，它保存最后一个选定的菜单键（因为这个键也用于其他选择器）-> 用于获取当前选定键的特定信息。

export const menuItems = atom({
  key: "menuItems",
  default: ({ get }) => get(baseApi)("/menu"),
}); -> Returns Menu Items

然后我有一个原子，它保存选定的菜单项键：

export const selectedMenuKey = atom<string>({
  key: "selectedMenuKey",
});

我无法为初始选择的菜单键添加前缀，因为我事先不知道。我希望行为如下：

如果未设置该键（当应用程序最初运行时），请将 selectedMenuKey 值设置为 menuItems 原子值的第一项，否则为最后设置的值。

你认为实现这一目标的最佳方式是什么？

【问题讨论】：

标签： recoiljs

【解决方案1】：

我遇到了这个确切的用例。这是我最终要做的。

在我的“activeTabState”文件中，相当于你的“selectedMenuKey”：

import { atom, selector } from 'recoil';

import formMapState from './formMapState';

const activeTabState = atom({
  key: 'activeTabAtom',
  default: selector({
    key: 'activeTabDefault',
    get: ({ get }) => {
      const formMap = get(formMapState);

      if (!formMap) return null;

      const [defaultTab] = Object.keys(formMap);

      return defaultTab;
    },
  }),
});

export default activeTabState;

然后您可以像更新任何其他反冲状态一样更新选项卡：

const FormNavigationTab = (props) => {
  const { text, sectionName } = props;
  const [activeTab, setActiveTab] = useRecoilState(activeTabState);

  return (
    <NavigationTab active={activeTab === sectionName} onClick={() => setActiveTab(sectionName)}>
      {text}
    </NavigationTab>
  );
};

需要注意的一件事是，在加载菜单项之前，您的 activeTab 值将为 null。所以根据我的用例，我需要在使用它之前添加一个安全措施：

const FormPage = () => {
  const map = useRecoilValue(formMapState);
  const activeTab = useRecoilValue(activeTabState);

  // Starts out null if the map hasn't been set yet, since we don't know what the name of the first tab is
  if (!activeTab) return null;

  const { text, fields, sections } = map[activeTab];
  
// ... the rest of the component

【讨论】：