我正在使用自定义 Hook 从 API 中提取一些数据,以便在一组 React 函数组件中使用。然而,esLint 抛出了一个可爱的警告:
React Hook useEffect has a missing dependency: 'fetchFromAPI'. Either include it or remove the dependency array.
我不认为它是依赖项,因为它位于 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
};
最佳答案
我建议您在 useEffect 本身内部定义异步函数:
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 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
// ...
}
关于reactjs - 如何修复自定义 Hook 中的 "useEffect has a missing dependency",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58413705/