关于在react的useEffect使用axios请求出现两次的问题

问题原因

在react18中启用了严格模式。

解决方法

1. 删除main.tsx中的<React.StrictMode>标签，使用useEffect就不会出现请求两次的情况
2. 借助useRef解决。

相关代码

let [pageNum, setPageNum] = useState<number>(1);
let [pageSize, setPageSize] = useState<number>(10);
let [dataSource, setDataSource] = useState<DataType[]>([]);
let [total, setTotal] = useState<number>(0);
let renderRef = useRef<boolean>(true);

const loadData = async () => {
    await axios
        .get(`url`, {
             pageNum,
             pageSize
         })
         .then((resp: any) => {
             setDataSource(resp.rows);
             setTotal(resp.total);
         });
};

useEffect(() => {
    if (renderRef.current) {
       renderRef.current = false;
       return;
    }
    loadData();
}, [pageNum, pageSize]);

上述的解决方法任选一种即可。 

后记：

      至于其他在react的hooks中的useEffect遇到执行两次的情况，解决的方式与上述的思路差不多。

此外react官方的说明

• 这是React18的新特性，只有在开发模式下且使用了严格模式才会触发2次，生产环境与原来一样
• 执行2次是为了模拟立即卸载组件和重新挂载组件
• React未来会增加特性，允许其保留状态的同时能够做到仅仅删除或者添加UI部分

我这是在初学的时候遇到的问题，开始还以为是出了啥bug。后来去了解了才发现，如果不介意开发模式下出现两次请求的情况，可以选择无视它，毕竟正式环境不会出现。