React新手使用useEffect模拟componentDidMount出现无限循环求助

• 无限循环的核心诱因是你没有给useEffect传入第二个依赖数组参数：
  按照React Hook的规则，若useEffect不指定依赖数组，每次组件渲染完成后都会执行回调逻辑。你在回调中调用接口后执行setPackages修改状态，会触发组件重新渲染，重新渲染后又会再次执行useEffect回调，由此进入「渲染→执行effect→修改状态→重新渲染」的无限循环。
• 你写的if(!packages)判断逻辑不会生效：
  你给packages的初始值是空数组[]，JavaScript中空数组属于真值，![]的运算结果为false，这个判断条件永远不会触发。如果你要判断列表为空才请求，应该改用if(packages.length === 0)。
• 额外注意点：你用instance.get拿到的响应是完整的请求对象，通常业务需要的返回数据存放在resp1.data属性中，直接存整个响应对象可能不符合你的预期。

要让useEffect只在组件首次挂载完成后执行一次，只需要给它传入空数组[]作为第二个依赖参数即可，修正后的代码如下：

import { useState, useEffect } from 'react';

function Packages(){
    const [packages, setPackages] = useState([]);

    // 传入空依赖数组，仅首次挂载后执行一次
    useEffect(() => {
        const getPackages = async () => {
            const resp1 = await instance.get('https://jsonplaceholder.typicode.com/todos/1');
            // 取响应体里的data字段赋值
            setPackages(resp1.data);
        };
        getPackages();
    }, []);

    // 后续组件渲染逻辑
}

内容的提问来源于stack exchange，提问作者Ela Buwa