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

Question

我第一次玩反冲，不知道如何从 atomFamily 中读取所有元素。假设我有一个应用程序，用户可以在其中添加餐点:

export const meals = atomFamily({
  key: "meals",
  default: {}
});

我可以按如下方式初始化一顿饭:

const [meal, setMeal] = useRecoilState(meals("bananas"));
const bananas = setMeal({name: "bananas", price: 5});

如何读取已添加到此 atomFamily 的所有项目？

Answer 1

您必须跟踪 atomFamily 的所有 id得到家庭的所有成员。
请记住，这并不是一个真正的列表，更像是一张 map 。
像这样的东西应该让你去。

// atomFamily
const meals = atomFamily({
  key: "meals",
  default: {}
});

const mealIds = atom({
  key: "mealsIds",
  default: []
});

在族内创建新对象时，您还必须更新 mealIds原子。
我通常使用 useRecoilCallback Hook 以将其同步在一起

  const createMeal = useRecoilCallback(({ set }) => (mealId, price) => {
    set(mealIds, currVal => [...currVal, mealId]);
    set(meals(mealId), {name: mealId, price});
  }, []);

这样，您可以通过调用以下方式创建餐点:

createMeal("bananas", 5);

并通过以下方式获取所有 ID:

const ids = useRecoilValue(mealIds);