1

我试图从官方文档中了解如何正确使用 SelectFromResult ：

https://redux-toolkit.js.org/rtk-query/usage/queries#selecting-data-from-a-query-result

我已经扩展了口袋妖怪示例，以使用 SelectFromResult 检索以“saur”结尾的口袋妖怪的过滤列表，但输出导致错误和 isLoading 数据丢失

现场沙箱： https ://codesandbox.io/s/rtk-query-selectfromresult-vvb7l

相关代码在这里：

端点使用 transformResponse 提取相关数据：

    getAllPokemon: builder.query({
      query: () => `pokemon/`,
      transformResponse: (response: any) => {
        console.log("transformResponse", response);
        return response.results;
      }
    })

如果我尝试 selectFromResult 并且我丢失了 error 和 isLoading 变量，钩子会失败，因为它们不再从钩子返​​回。如果我注释掉 SelectFromResult 选项，它们就会被正确返回。

export const PokemonList = () => {
  const { data, error, isLoading } = useGetAllPokemonQuery(undefined, {
    selectFromResult: ({ data }) => ({
      data: data?.filter((item: Pokemon) => item.name.endsWith("saur"))
    })
  });

  useEffect(() => {
    if (data) console.log("filtered result", data);
  }, [data]);

  return (
    <div>
      {data?.map((item: Pokemon) => (
        <p>{item.name}</p>
      ))}
    </div>
  );
};

我的问题：我不想在尝试使用推荐的方法过滤结果时丢失获取状态。如何修改上述代码以正确 SelectFromResult 并从钩子中保持正确的错误、isLoading 等状态值？

4

1 回答 1

2

找到的解决方案：

我传入并返回了额外的必需变量（并通过添加轮询间隔进行测试，以允许我断开连接以强制和错误）

  const { data, error, isLoading } = useGetAllPokemonQuery(undefined, {
    selectFromResult: ({ data, error, isLoading }) => ({
      data: data?.filter((item: Pokemon) => item.name.endsWith("saur")),
      error,
      isLoading
    }),
    pollingInterval: 3000,
  });
于 2021-09-23T11:16:40.463 回答