React-Admin：如何在Show View组件中获取record.id并传入自定义函数

问题原因 #

你当前直接在ClientsShow组件顶层访问未定义的record变量无法获取值，react-admin的Show组件会异步拉取资源记录并存储在内部Context中，只有Show的后代组件或通过官方提供的控制器钩子才能拿到record数据。

方案1：使用useShowController钩子（推荐，可在组件顶层直接获取record） #

这个钩子可以直接在Show组件内部获取控制器返回的所有状态，包括record、加载状态等：

import { useShowController, Show, TabbedShowLayout, Tab, ShowActions } from 'react-admin';

export const ClientsShow = props => {
    const classes = useStyles(); 
    // 调用钩子获取record和加载状态
    const { record, isLoading } = useShowController(props);
    // 加载中返回占位，避免record为undefined时报错
    if (isLoading) return <div>加载中...</div>;
    const chartDataThisYear = ClientShowGroupSum(null, "other", record.id)

    return (
        <Show actions={<ShowActions />} {...props}>
            <TabbedShowLayout >
                <Tab label="Principal">
                    <SimpleLineChart
                      chartTitle="Faturamento R$"
                      mylabels={ chartDataThisYear.chartlabels }
                      myvalues={ chartDataThisYear.chartvalues }                     
                      tooltipXpre={"Data: "}
                      tooltipYpre={"R$"} />
                </Tab>
            </TabbedShowLayout>
        </Show>
    )
}

方案2：使用useRecordContext钩子（适合在子组件内获取record） #

如果你的逻辑不需要在组件顶层处理，可以把图表逻辑封装为独立子组件，在子组件内通过Context拿record：

import { useRecordContext, Show, TabbedShowLayout, Tab, ShowActions } from 'react-admin';

// 封装独立的图表组件
const ClientRevenueChart = () => {
  const record = useRecordContext();
  const chartDataThisYear = ClientShowGroupSum(null, "other", record.id);
  return (
    <SimpleLineChart
      chartTitle="Faturamento R$"
      mylabels={ chartDataThisYear.chartlabels }
      myvalues={ chartDataThisYear.chartvalues }                     
      tooltipXpre={"Data: "}
      tooltipYpre={"R$"} />
  )
}

export const ClientsShow = props => {
    const classes = useStyles(); 
    return (
        <Show actions={<ShowActions />} {...props}>
            <TabbedShowLayout >
                <Tab label="Principal">
                    <ClientRevenueChart />
                </Tab>
            </TabbedShowLayout>
        </Show>
    )
}

额外说明 #

如果你的ClientShowGroupSum是异步请求函数，需要配合useEffect和useState存储返回结果，避免重复调用：

const { record, isLoading } = useShowController(props);
const [chartData, setChartData] = useState({chartlabels: [], chartvalues: []});

useEffect(() => {
  if (!record) return;
  // 异步调用后更新状态
  ClientShowGroupSum(null, "other", record.id).then(res => setChartData(res));
}, [record])

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