在react-admin中使用getOne传递额外的数据,可以通过自定义数据提供者来实现。以下是一种可能的实现方式:
import { fetchUtils } from 'react-admin';
const apiUrl = 'https://api.example.com'; // 替换为实际的API地址
const customDataProvider = {
...defaultDataProvider, // 默认的数据提供者
getOne: (resource, params) => {
const { id, extraData } = params;
const url = `${apiUrl}/${resource}/${id}`;
const options = {
headers: new Headers({
Accept: 'application/json',
}),
};
return fetchUtils.fetchJson(url, options)
.then(({ json }) => ({
data: {
...json,
extraData, // 将额外的数据添加到返回结果中
},
}));
},
};
export default customDataProvider;
<Admin>
组件。import React from 'react';
import { Admin, Resource } from 'react-admin';
import customDataProvider from './customDataProvider';
const App = () => (
<Admin dataProvider={customDataProvider}>
{/* 定义资源和页面 */}
</Admin>
);
export default App;
<Edit>
或<Show>
组件时,通过<FormDataConsumer>
组件来获取额外的数据。import React from 'react';
import { Edit, SimpleForm, TextInput, FormDataConsumer } from 'react-admin';
const PostEdit = (props) => (
<Edit {...props}>
<SimpleForm>
<TextInput source="title" />
{/* 获取额外的数据 */}
<FormDataConsumer>
{({ formData }) => (
<TextInput source="extraData" defaultValue={formData.extraData} />
)}
</FormDataConsumer>
</SimpleForm>
</Edit>
);
export default PostEdit;
这样,当使用<Edit>
或<Show>
组件时,通过自定义数据提供者的getOne
方法,可以传递额外的数据,并在表单中使用<FormDataConsumer>
组件来获取并展示这些额外的数据。
请注意,以上代码仅为示例,实际情况中需要根据具体需求进行适当的修改和调整。
领取专属 10元无门槛券
手把手带您无忧上云