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

Question

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

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

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

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

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

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

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

Answer 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