具体可以看:https://www.robinwieruch.de/react-hooks-fetch-data/
产生原因:1. react18的版本的问题
2. strict mode in development
解决:
- 取消严格模式
只需要去掉React.StrictMode标签就行了。网上查相关资料说是执行多次的行为是想提醒开发者,注意清除副作用,提前暴露问题等等。
2. 借助 useRef
import React, { useState, useEffect, useRef } from 'react';
import styles from './List.module.css';
import axios from 'axios';
const List = () => {
const renderRef = useRef(true); // 解决 useEffect 调用俩次的
useEffect(() => {
if (renderRef.current) {
renderRef.current = false;
return;
}
fetchData();
}, []);
const fetchData = () => {
setLoading(true);
const url = `https://cnodejs.org/api/v1/topics?page=1&tab=all&limit=20`;
axios.get(url).then((res) => {
setList(res.data.data);
setLoading(false);
});
};
return (
<>....</>
);
};
export default List;