react-admin使用ra-data-json-server遇toJSON函数未知错误求助

问题 #

使用ra-data-json-server作为react-admin的数据提供者时，应用可正常运行并正确获取数据，但React DevTools控制台持续抛出“Unknown dataProvider function: toJSON”错误，无法消除。

代码示例 #

import jsonServerProvider from 'ra-data-json-server';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

export default function App() {
    return (
        <Admin dataProvider={dataProvider}>
            <Resource
                name="posts"
                list={ListGuesser}
                show={ShowGuesser}
                edit={EditGuesser}
            />
        </Admin>
    );
}

控制台报错 #

Error: Unknown dataProvider function: toJSON
    at Proxy.eval (useDataProvider.ts:96:31)
    at JSON.stringify (<anonymous>)
    at Object.parseData (<anonymous>:8:116)
    at <anonymous>:10:2186
    at Array.reduce (<anonymous>)
    at <anonymous>:10:2114
    at i (<anonymous>:10:2706)
    at <anonymous>:10:2993
    at _ (<anonymous>:10:3119)
    at <anonymous>:10:3363

环境版本 #

• react-admin 4.5.2
• ra-data-json-server 4.5.2
• react 18.2.0
• react-dom 18.2.0

解决方案 #

该错误是因为React DevTools尝试对dataProvider对象执行JSON.stringify，而ra-data-json-server返回的dataProvider是Proxy对象，JSON.stringify会自动调用toJSON方法，但该方法不在react-admin预期的dataProvider API中，从而触发错误。

只需给dataProvider添加toJSON方法，让JSON.stringify能正确序列化对象即可：

方法1：通过Proxy扩展 #

import jsonServerProvider from 'ra-data-json-server';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

// 增强dataProvider，添加toJSON方法避免序列化报错
const enhancedDataProvider = new Proxy(dataProvider, {
  get(target, prop) {
    if (prop === 'toJSON') {
      return () => ({ ...target });
    }
    return Reflect.get(target, prop);
  },
});

export default function App() {
    return (
        <Admin dataProvider={enhancedDataProvider}>
            <Resource
                name="posts"
                list={ListGuesser}
                show={ShowGuesser}
                edit={EditGuesser}
            />
        </Admin>
    );
}

方法2：直接添加toJSON方法 #

import jsonServerProvider from 'ra-data-json-server';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
// 添加toJSON方法，返回包含所有dataProvider方法的普通对象
dataProvider.toJSON = () => ({ ...dataProvider });

export default function App() {
    return (
        <Admin dataProvider={dataProvider}>
            <Resource
                name="posts"
                list={ListGuesser}
                show={ShowGuesser}
                edit={EditGuesser}
            />
        </Admin>
    );
}

添加后，React DevTools序列化dataProvider时会调用自定义的toJSON方法，不会再触发错误。

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