2025年useEffect使用指南

科技前沿 • 2025-01-26 13:20 • 阅读 51

大家好，我是讯享网，很高兴认识大家。

一、夺命连环call

如果在useEffect函数中不写第二个参数，会使程序陷入死循环。

1.每次渲染结束都会调用useEffect函数，

2.而useEffect的副作用使得组件的状态更新，

3.导致UI的重新渲染，程序就陷入了死循环。

因此，要谨慎使用第二个参数为空的情形。

可以让第二个参数为空数组，模拟生命周期函数componentDidmount。

二、在useEffect中使用async/await

错误示范：

错误提示有两层意思：

1.useEffect要返回只能是一个函数，或者什么都不返回；在这里插入图片描述
讯享网

2.useEffect不支持关键词async，原因是：使用async/await关键词，会返回一个promise，useEffect的返回也就是promise了。

正确示范：

在useEFfect中写一个异步函数，并调用它。

useEffect(() => { 
    const fetchData = async () => { 
    const response = await fetch( "https://jsonplaceholder.typicode.com/users" ); const data = await response.json(); setRobotGallery(data); }; fetchData(); }, []);

讯享网

三、loading的处理

在请求后端数据，且数据没有返回的时候，需要展示加载中，这就需要获取loading的状态。

讯享网const [loading, setLoading] = useState<boolean>(false);

可以在访问api之前将loading设置为true，显示加载中，

等到数据返回，将loading切换为false。

useEffect(() => { 
    const fetchData = async () => { 
    setLoading(true); const response = await fetch( "https://jsonplaceholder.typicode.com/users" ); const data = await response.json(); setRobotGallery(data); setLoading(false); }; fetchData(); }, []);

render：

讯享网{loading ? ( <div>加载中.....</div> ) : ( <div className={styles.robotList}> {robotGallery.map((r) => ( <Robot id={r.id} name={r.name} email={r.email} /> ))} </div> )}

四、error的处理

api请求会出现不确定的错误，需求在副作用函数中对api请求做异常的处理。这里用一个string类型来保存错误信息。

const [error, setError] = useState<string>("");

async/await异步模式，可以使用一个try-catch来处理和截获异常，try-catch的位置和setLoading位置一致。

讯享网useEffect(() => { 
    const fetchData = async () => { 
    try { 
    setLoading(true); const response = await fetch( "https://jsonplaceholder.typicode.com/users" ); const data = await response.json(); setRobotGallery(data); } catch (e) { 
    if (e instanceof Error) { 
    setError(e.message); } } setLoading(false); }; fetchData(); }, []);