如何使用 Recoil 将数据动态分配给 atomFamily？答案

【问题标题】：How to dynamically assign data to an atomFamily with Recoil?如何使用 Recoil 将数据动态分配给 atomFamily？
【发布时间】：2021-08-09 18:12:45
【问题描述】：

如果我获取动态数据，如何在不违反钩子规则的情况下将其放入 atomFamily 中？ useSetRecoilState 要求我传入atomFamily(someIndex)，但是对于动态数据，直到在获取数据之后我才拥有someIndex。所以看起来我应该有const setterFactory = someKey => useSetRecoilState(useAtomFamily(someKey))，但这违反了钩子规则。

例子：

假设我有一个附带类型（和反冲 atomFamily）的 API 响应

type Foo = unknown & { index: string }
type Response = {
  foos: Foo[]
}
const myAtomFamily = useAtomFamily<Foo, string>({
  key: 'foo',
  default: null,
})
declare const fetchFromApi = () => Promise<Foo[]>

所以如果我有一个自定义钩子，

const myHook = () => {
  const fooSetter = useSetRecoilState(myAtomFamily(???))

  useEffect(() => {
    fetchFromApi().then(foos => {
      foos.forEach(foo => fooSetter(???)(???))
    })
  }, [])
}

【问题讨论】：

标签： recoiljs

【解决方案1】：

您可以为此使用useRecoilCallback 挂钩，它基本上是一个工厂挂钩，可让您访问set 函数：

const useMyHook = () => {
  const fetchAndSet = useRecoilCallback(({set}) => async () => {
    const foos = await fetchFromApi();

    foos.forEach(foo => set(myAtomFamily(foo.id), foo))
  }, [])

  useEffect(fetchAndSet, [])
}

【讨论】：