React Redux Ant Design表格首次加载无数据，返回后正常显示求助

核心问题1：State未同步RTK Query返回的数据 #

你用useState初始化exchanges为exchangesList?.data，但useState的初始值只会在组件首次渲染时赋值一次。当RTK Query异步获取到数据后，exchangesList更新，但exchanges不会自动同步，导致首次加载时exchanges还是undefined，表格无数据。切换页面返回时，组件重新渲染，此时exchangesList已有数据，useState初始值拿到数据，表格正常显示。

修复： 移除多余的useState，直接使用exchangesList?.data，避免冗余state。

核心问题2：变量名冲突与未定义变量 #

• 组件名为Table，同时又从Table解构Column，这会和Ant Design的Table组件冲突，导致Column无法正常使用。
• 代码中使用了!loading判断，但未定义loading变量，应该使用RTK Query返回的isFetching或isLoading。

核心问题3：表格渲染时机判断错误 #

当isFetching为true时返回Loader，但后续判断!loading（未定义）直接返回表格，可能导致数据未准备好时渲染空表格。

修改后的完整代码 #

import { Table as AntTable } from 'antd'; // 重命名避免组件名冲突
import { useGetExchangesQuery } from './your-services-path'; // 替换为实际的services路径
import millify from 'millify';
import Loader from './your-loader-path'; // 替换为实际的Loader组件路径

const CryptoTable = () => { // 重命名组件，避免和Antd Table冲突
  const { data: exchangesList, isLoading, isFetching } = useGetExchangesQuery();

  // 直接使用RTK Query返回的数据，无需额外维护state
  const exchanges = exchangesList?.data;

  // 首次加载或数据刷新时显示加载态
  if (isLoading || isFetching) return <Loader />;

  const modifiedData = exchanges?.map(({ name, ...exchange }) => ({
    ...exchange,
    key: exchange.id,
    crypto: name
  }));

  const columns = [
    {
      title: "Coin",
      key: "coin",
      dataIndex: "symbol",
      render: (text, value) => (
        <span>{value.rank}. ({value.symbol}) {value.crypto}</span>
      )
    },
    {
      title: "Price (USD)",
      dataIndex: "priceUsd",
      render: (text, value) => (
        `$${millify(value.priceUsd, { precision: 4 })}`
      )
    },
    {
      title: "Market Cap",
      dataIndex: "marketCapUsd",
      render: (text, value) => (
        `$${millify(value.marketCapUsd, { precision: 2 })}`
      )
    },
    {
      title: "Change",
      dataIndex: "changePercent24Hr",
      render: (text, value) => (
        `${millify(value.changePercent24Hr, { precision: 2 })}%`
      )
    },
    {
      title: "Supply",
      dataIndex: "supply",
      render: (text, value) => (
        `${millify(value.supply, { precision: 3 })}`
      )
    }
  ];

  return (
    <>
      <AntTable className='exchanges-table' columns={columns} dataSource={modifiedData} />
    </>
  );
};

export default CryptoTable;

额外优化建议 #

• RTK Query的isLoading表示首次加载状态，isFetching表示后续刷新状态，结合使用能更准确控制加载提示。
• 可以把columns提取到组件外部，减少每次渲染的不必要计算。

内容的提问来源于stack exchange，提问作者Coding0