[英]How do I fix “useEffect has a missing dependency” in custom hook
I'm using a custom hook to get pull some data in from an API for use across a set of React function components.我正在使用自定义钩子从 API 中获取一些数据,以便在一组 React function 组件中使用。 However, esLint throws up a lovely warning:
然而,esLint 抛出了一个可爱的警告:
React Hook useEffect has a missing dependency: 'fetchFromAPI'.
React Hook useEffect 缺少依赖项:'fetchFromAPI'。 Either include it or remove the dependency array.
包括它或删除依赖数组。
I didn't think it's a dependency, as it's inside useFetch()
itself.我不认为这是一个依赖,因为它在
useFetch()
本身内部。 I need to do it as I'm using await
.我需要这样做,因为我正在使用
await
。 What am I doing wrong?我究竟做错了什么? Is it ok to just turn off the warning for this line?
关闭这条线路的警告可以吗? Or is there a more canonical syntax I should be using?
还是我应该使用更规范的语法?
function useFetch (url) {
const [data, setData] = useState(null);
async function fetchFromAPI() {
const json = await( await fetch(url) ).json();
setData(json);
}
useEffect(() => {fetchFromAPI()},[url]);
return data;
};
export {
useFetch
};
Declare it outside your custom effect passing url
as parameter and return
the json
to be setted inside useEffect
在自定义效果之外声明它,传递
url
作为参数并return
json
以在useEffect
中设置
async function fetchFromAPI(url) {
const json = await( await fetch(url) ).json();
return json
}
function useFetch (url) {
const [data, setData] = useState(null);
useEffect(() => {
setData(fetchFromAPI(url))
},[url]);
return data;
};
Or directly inside useEffect
或者直接在
useEffect
里面
function useFetch (url) {
const [data, setData] = useState(null);
useEffect(() => {
async function fetchFromAPI() {
const json = await( await fetch(url) ).json();
return json
}
setData(fetchFromAPI())
},[url]);
return data;
};
I suggest you to define async function inside useEffect itself:我建议您在 useEffect 本身中定义 async function :
function useFetch (url) {
const [data, setData] = useState(null);
useEffect(() => {
async function fetchFromAPI() {
const json = await( await fetch(url) ).json();
setData(json);
}
fetchFromAPI()
},[url]);
return data;
};
You can take a look at valid example from doc faqs which uses async function inside useEffect itself:您可以查看doc faqs 中的有效示例,该示例在 useEffect 本身中使用异步 function:
function ProductPage({ productId }) {
const [product, setProduct] = useState(null);
useEffect(() => {
// By moving this function inside the effect,
// we can clearly see the values it uses.
async function fetchProduct() {
const response = await fetch('http://myapi/product' + productId);
const json = await response.json();
setProduct(json);
}
fetchProduct();
}, [productId]); // ✅ Valid because our effect only uses productId
// ...
}
Just move your function inside the useEffect, and everything will be fine:只需将您的 function 移动到 useEffect 中,一切都会好起来的:
import { useState, useEffect } from "react";
function useFetch(url) {
const [data, setData] = useState(null);
useEffect(() => {
async function fetchFromAPI() {
const json = await (await fetch(url)).json();
setData(json);
}
fetchFromAPI();
}, [url]);
return data;
}
export { useFetch };
https://codesandbox.io/s/clever-cdn-8g0me https://codesandbox.io/s/clever-cdn-8g0me
async function fetchFromAPI(url) {
return ( await fetch(url) ).json();
}
function useFetch (url) {
const [data, setData] = useState(null);
useEffect(() => {
fetchFromAPI(url).then(setData);
}, [url, setData, fetchFromAPI]);
return data;
};
export {
useFetch
};
fetchFromAPI
, for not being created every time useFetch calls, also it's good for single responsibility.fetchFromAPI
,因为每次调用 useFetch 时都不会创建,这对单一职责也有好处。setData
and fetchFromAPI
params.setData
和fetchFromAPI
参数。 And exactly in this order.useEffect
don't need to check the others and call passed function earlieruseEffect
不需要检查其他人并提前致电通过 function
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.