为什么我的 useFetch 函数被调用两次?

Question

我正在尝试使用 React Hooks 构建我的第一个函数，该函数从 API 端点获取数据。代码如下所示。

在我的 React 组件中：

const [{ data, isLoading, isError }] = useFetch(
'https://hn.algolia.com/api/v1/search?query=apple'
);
console.log(data);

在我导入的名为requests.js的文件中：

export const useFetch = (url) => {
const [data, setData] = useState();
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
useEffect(() => {
const fetchData = async () => {
setIsError(false);
setIsLoading(true);
try {
const result = await axios(url);
setData(result.data);
} catch (error) {
setIsError(true);
}
setIsLoading(false);
};
fetchData();
}, [url]);
return [{ data, isLoading, isError }];
};

当它工作时，每当我刷新浏览器时，都会对端点进行两次调用。为什么会这样，我怎么能让它只被调用一次？

Answer 1

从useEffect()中删除依赖项应该可以解决问题：

const [{ data, isLoading, isError }] = useFetch(
'https://hn.algolia.com/api/v1/search?query=apple'
);
console.log(data);

export const useFetch = (url) => {
const [data, setData] = useState();
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
useEffect(() => {
const fetchData = async () => {
setIsError(false);
setIsLoading(true);
try {
const result = await axios(url);
setData(result.data);
} catch (error) {
setIsError(true);
}
setIsLoading(false);
};
fetchData();
}, []/* Will run once */);
return [{ data, isLoading, isError }];
};

Answer 2

如果有人有同样的问题，但 @miroslav-glamuzina 的响应不起作用，也许这会：

我正在传递一个嵌套对象video在获取正文中。 更改此对象的一个字段时，将再次执行查询。

事实证明，useFetch的watch参数默认设置为true。

const { error } = await useFetch('/api/schedule', {
method: 'PUT',
body: { video },
watch: false
})

将watch设置为false，确实为我解决了问题。