如何字符串化一个复杂对象，其中某些值是包含函数的数组?

Question

我正在编写一个自定义useAxios钩子。我希望axios请求配置对象位于我的useEffect的依赖项数组中。但是，该对象包含数组中的函数。我正在尝试找到一种方法来字符串化axios请求配置对象，以便useEffect可以正确区分它。

尝试将JSON.stringify与自定义替换器一起使用，但toString()方法过于文字化并保持边距间距，因此两个看似相同的函数将因间距而被评估为唯一。

这是我对自定义替代品的JSON.stringify：

JSON.stringify(param1, (key, value) => {
if (Array.isArray(value)) {
return value.map(func => func.toString());
}
});

我正在寻找无论间距如何，这两个对象都被评估为相等：

1.

{
url: 'https://reqres.in/api/things/1',
responseType: 'json',
transformResponse: [
function test(param) {
return param;
},
],
}

阿拉伯数字。

{
url: 'https://reqres.in/api/things/1',
responseType: 'json',
transformResponse: [
function test(param) {
return param;
},
],
}

并将这两个对象评估为唯一对象：

1.

{
url: 'https://reqres.in/api/things/1',
responseType: 'json',
transformResponse: [
function test(param) {
return param;
},
],
}

阿拉伯数字。

{
url: 'https://reqres.in/api/things/1',
responseType: 'json',
transformResponse: [
function test2(param) {
return param;
},
],
}

Answer 1

正如建议的那样 https://github.com/facebook/react/issues/14476 您可以使用useRef来保存以前的配置并将compare(prevConfig, config)用作依赖项：

function useAxios(config) {
const [prevConfig] = useRef(null); 
useEffect(() => {
... 
prevConfig.current = config; 
}, [isDeepEqual(config, prevConfig)]);
}

isDeepEqual可能是自定义比较器或只是从下划线/lodash 帮助。