1

我有一个订阅 Recoil atomFamily 的 React 功能组件。目的是 atomFamily 将更新父状态中的一个项目，然后依赖于父状态的另一个组件将通过useEffect. 然而，这似乎并没有发生。为什么会这样？从它的样子（和我自己的实验）来看，使用 Recoil 选择器更改父状态的一部分应该会自动传播回父状态。

选择器状态项如下所示：

import { atomFamily, selectorFamily } from "recoil";
import { GroupInterface } from './../interfaces/GroupInterface';
import { GroupList } from './GroupList';

export const GroupSelector = atomFamily({
    key: "GroupSelector",
    default: selectorFamily({
        key: "GroupSelector/default",
        get: id => ({get}): GroupInterface => {
            const groupList = get(GroupList);

            return groupList.find((group) => group.id === id) as GroupInterface
        }
    })
})

父状态项如下所示：

import { atom } from 'recoil';
import { GroupInterface } from '../interfaces/GroupInterface';

export const GroupList = atom({
    key: "GroupList",
    default: [] as GroupInterface[]
})

设置atomFamily后需要更新的组件如下：

useEffect(() => {
    setCurrentActiveSwaps(getCurrentActiveSwaps(groupList));
    // eslint-disable-next-line
}, [groupList])
4

1 回答 1

0

首先，您将 atomFamily 分配给 GroupSelector，

GroupSelector = atomFamily({

然后该原子的默认值设置为 selectorFamily，

 default: selectorFamily({

通常，您会将数组或对象作为默认值。使用 selectorFamily 作为默认值很有趣，但不确定它会导向哪里。

这是一个很好的例子，

如何从反冲的atomFamily中获取所有元素？

于 2021-05-14T21:07:08.930 回答