我有一个带有 API 过滤参数的对象，这个对象我传递给 useEffect。
let dataForFilter = typeof defaultFormData[someKey] !== 'undefined'
? defaultFormData[someKey]
: {};
for (let key in props.route.params) {
if (props.route.params.hasOwnProperty(key)) {
dataForFilter[key] = props.route.params[key];
}
}
useEffect(() => {
async function fetchData() {
const body = {
...dataForFilter,
};
loadData(url, body);
}
fetchData();
}, [dataForFilter]);
默认情况下，对象是空的，但是如果我将数组中的空对象作为第二个参数传递，这会导致无限循环。我不明白为什么？请有人解释一下为什么以及如何解决。
每次函数运行时，它都会在这里创建一个新的空对象：
let dataForFilter = typeof defaultFormData[someKey] !== 'undefined'
? defaultFormData[someKey]
: {};
所以依赖数组的值在每次渲染时都会改变，如果defaultFormData[someKey]不存在的话。空对象不等于自身。
console.log([{}] === [{}]);
console.log({} === {});而是在函数外部创建对象，以使其引用稳定。
const emptyObj = {};
const MyComponent = ({ defaultFormData }) => {
// ...
let dataForFilter = typeof defaultFormData[someKey] !== 'undefined'
? defaultFormData[someKey]
: emptyObj;
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句