createEffect
是 React 中的一个 Hook,用于在组件挂载时执行副作用操作,比如数据获取、订阅或手动更改 DOM 等。它返回一个函数,用于清除副作用。
createEffect
会自动处理组件挂载和卸载时的副作用操作,无需手动管理 componentDidMount
和 componentWillUnmount
。createEffect
可以接受一个依赖数组,只有当依赖发生变化时,副作用才会重新执行。createEffect
主要有两种类型:
当角度发生错误时,createEffect
导致持续加载,通常是因为依赖数组设置不当或副作用函数内部逻辑错误。
import React, { createEffect, useState } from 'react';
const MyComponent = () => {
const [data, setData] = useState(null);
createEffect(() => {
let isMounted = true;
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
if (isMounted) {
setData(result);
}
} catch (error) {
console.error('Error fetching data:', error);
}
};
fetchData();
return () => {
isMounted = false;
};
}, []); // 确保依赖数组正确
return (
<div>
{data ? <div>{JSON.stringify(data)}</div> : <div>Loading...</div>}
</div>
);
};
export default MyComponent;
通过以上方法,可以有效解决 createEffect
导致持续加载的问题。确保依赖数组设置正确,并检查副作用函数内部逻辑,避免无限循环或其他错误。
领取专属 10元无门槛券
手把手带您无忧上云