reactjs 用于自定义方法useDataProvider挂钩

qxsslcnc 于 2022-11-04 发布在 React

关注(0)|答案(2)|浏览(161)

bounty将在5天后过期。回答此问题可获得+50的声望奖励。Heikkisorsa希望吸引更多人关注此问题。

我在组件中调用了const dataProvider = useDataProvider()，并且可以使用dataProvider.getList("resource",{})之类的默认方法，没有任何问题。然后，我用一个自定义的get方法扩展了我的DataProvider，用于检索不具有所需Record结构的对象，如下所示：

get: async <T = any>(
    resource: string,
    params: Partial<QueryParams>
  ): Promise<{
    data: T
  }> => {
    const url = `${apiUrl}/${resource}?${stringify(params)}`

    return httpClient(url)
      .then(({ json }) => ({
        data: json,
      }))
      .catch((e) => {
        console.log(e)
        return Promise.reject(e)
      })
  },

当我直接导入DataProvider对象时，我可以毫无问题地使用此方法，但当我想将其与useDataProvider挂钩一起使用时，我得到以下键入消息：(...a: unknown[]) => unknown
我必须添加/更改什么，才能使我的自定义数据提供器方法也具有正确的useDataProvider挂钩类型？
我使用的是react-admin版本3.14，可能很快就会升级到4.x。

reactjs

来源：https://stackoverflow.com/questions/74244673/usedataprovider-hook-for-custom-methods

2条答案

按热度按时间

ocebsuys1#

这里有很多东西要补充：首先，创建一个如下所示的自定义DataProvider类型。

type CustomDataProvider = DataProvider & {
  get: <ResponseType = any>(
    resource: string,
    params: Partial<QueryParams>
  ) => Promise<{
    data: ResponseType
  }>
}

其次，创建一个自定义DataProviderProxy类型。

type CustomDataProviderProxy = DataProviderProxy & {
  get: <ResponseType = any>(
    resource: string,
    params: Partial<QueryParams>,
    options?: UseDataProviderOptions
  ) => Promise<{
    data: ResponseType
  }>
}

第三，在useDataProvider挂接中使用它作为类型参数。

export function useCustomDataProvider() {
  return useDataProvider<CustomDataProvider, CustomDataProviderProxy>()
}

这允许在组件中正确使用键入的响应：

const dataProvider = useCustomDataProvider()
  dataProvider.get<User>('user', {}).then(({ data }) => console.log(data.id))

感谢@FatihAziz，你带我找到了正确的方向！

赞(0）回复(0）举报 2022-11-04

oxiaedzo2#

由于缺乏补充资料，
我假设get方法是保留的，因此您不能更改类型。
相反，您可以将get变更为getPartial，例如：

getPartial: async <T = any>(
    resource: string,
    params: Partial<QueryParams>
  ): Promise<{
    data: T
  }> => {
    const url = `${apiUrl}/${resource}?${stringify(params)}`

    return httpClient(url)
      .then(({ json }) => ({
        data: json,
      }))
      .catch((e) => {
        console.log(e)
        return Promise.reject(e)
      })
  },

但是，如果get不是由react-admin保留的，则可以使用类型转换来代替。
我在这里创建了使用类型转换的代码示例：https://codesandbox.io/s/stackoverflow-answer-forked-46jcsb?file=/src/index.ts
我希望能有所帮助，

赞(0）回复(0）举报 2022-11-04

我来回答

reactjs 用于自定义方法useDataProvider挂钩

2条答案

相关问题

热门标签

最新问答