Redux Toolkit，组件在 RTK 查询完成后不会重新渲染答案

【问题标题】：Redux Toolkit, component does not re-render after RTK query is fulfilledRedux Toolkit，组件在 RTK 查询完成后不会重新渲染
【发布时间】：2022-10-08 20:32:09
【问题描述】：

我有一个像这样的子组件：

import { skipToken } from "@reduxjs/toolkit/dist/query";
import moment from "moment";
import {
  useFetchAccountQuery,
  useFetchTransactionsQuery,
} from "./accountApiSlice";

const TransactionsTable = () => {
  const { data: accountData } = useFetchAccountQuery();

  const changesSince: string = moment().subtract(7, "d").toISOString();

  let params = {
    accountId: accountData?.accountId,
    categoryId: accountData?.defaultCategoryId,
    changesSince,
  };

  const paramsAreGood: boolean = params.accountId && params.categoryId ? true : false;

  const { data: transactions, isSuccess: transactionsSuccess } = useFetchTransactionsQuery(paramsAreGood ? params : skipToken);

  return (
    <>
      {transactionsSuccess && (
        <div>
          <h1>Number of transactions: {transactions?.length}</h1>
        </div>
      )}
    </>
  );
};

export default TransactionsTable;

我正在做两个查询，然后使用第一个查询中的accountId 和categoryId 传递给第二个查询，以便我可以进行事务查询并获取数据。

在 Chrome 的“网络”选项卡中，我可以看到我的 useFetchTransactionsQuery() 触发并且我获取了数据。

但是，我的组件仍然空白，我没有得到：

<h1>Number of transactions: <some number></h1>

这是 Redux Dev Tools 的截图：

我错过了什么？

【问题讨论】：

标签： reactjs typescript redux redux-toolkit

【解决方案1】：

我认为在将值设置为参数之前，您应该检查 useFetchAccountQuery 是否已返回任何数据，因为 useFetchAccountQuery 是一个异步函数，我认为参数值是在帐户数据填充之前设置的

像这样试试

import { skipToken } from "@reduxjs/toolkit/dist/query";
import moment from "moment";
import {
  useFetchAccountQuery,
  useFetchTransactionsQuery,
} from "./accountApiSlice";

const TransactionsTable = () => {
  const { data: accountData, isSucceess: AccountDataSuccess } = useFetchAccountQuery();

  const changesSince: string = moment().subtract(7, "d").toISOString();

  let params ;
  if(AccountDataSuccess && accountData ){
     params = {
       accountId: accountData?.accountId,
       categoryId: accountData?.defaultCategoryId,
       changesSince,
    }
   };

  const paramsAreGood: boolean = params.accountId && params.categoryId ? true : false;

  const { data: transactions, isSuccess: transactionsSuccess } = useFetchTransactionsQuery(paramsAreGood ? params : skipToken);

  return (
    <>
      {transactionsSuccess && (
        <div>
          <h1>Number of transactions: {transactions?.length}</h1>
        </div>
      )}
    </>
  );
};

export default TransactionsTable;

如果您使用的是打字稿，请相应地注释参数。

我希望这行得通。我在我的工作中使用这种类型的模式并且它有效。

【讨论】：

可悲的是，这不起作用。 TypeScript 并不高兴，因为 params 可以是 undefined，如果你在 if 语句后面保护 useFetchTransactionsQuery，Redux 会抱怨你不能在 if 语句中使用钩子。
哦，对不起。我还有一个想法，让 param 成为状态值，然后调用 setSate 来设置 if 语句中的 param 的值。 RTk Query 缓存数据，因此useFetchAccountQuery 不会在状态更新后第二次重新渲染组件时发出网络请求。此外，将所有钩子放在组件的顶层，react doc 建议这样做。

【解决方案2】：

罪魁祸首是这一行：

const changesSince: string = moment().subtract(7, "d").toISOString();

我不知道为什么，但我放弃了 dayjs 的时刻，它现在可以工作了。

【讨论】：