[英]How do I fix “useEffect has a missing dependency” in custom hook
我正在使用自定义钩子从 API 中获取一些数据,以便在一组 React function 组件中使用。 然而,esLint 抛出了一个可爱的警告:
React Hook useEffect 缺少依赖项:'fetchFromAPI'。 包括它或删除依赖数组。
我不认为这是一个依赖,因为它在useFetch()
本身内部。 我需要这样做,因为我正在使用await
。 我究竟做错了什么? 关闭这条线路的警告可以吗? 还是我应该使用更规范的语法?
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
};
在自定义效果之外声明它,传递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;
};
或者直接在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;
};
我建议您在 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;
};
您可以查看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
// ...
}
只需将您的 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 };
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
,因为每次调用 useFetch 时都不会创建,这对单一职责也有好处。setData
和fetchFromAPI
参数。 并且完全按照这个顺序。 因为在重新渲染参数比较从第一个参数到最后一个参数时,最好将更改最多的参数放在第一位,因为每次更改下一个参数时都不检查未更改的参数,所以如果第一次更改, useEffect
不需要检查其他人并提前致电通过 function
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.