我在多个组件中使用这个 useFetch
自定义 Hook 。
import {useState,useEffect} from 'react'
import {getToken} from './../services/token'
const useFetch = (url) => {
const [data,setData] = useState(null);
const [error,setError] = useState(null);
const [loading,setPending] = useState(false);
useEffect(() => {
(async()=>{
const abortCont = new AbortController();
const token = await getToken();
try {
setPending(true);
const response = await fetch(url,{
signal : abortCont.signal,
headers : {
"Content-Type" : "application/json",
"Authorization" : "Bearer "+token
}
});
const result = await response.json();
setData(result);
setPending(false);
} catch (err) {
if(err.name === 'AbortError'){
abortCont.abort();
return;
}
setError(String(err));
setPending(false);
}
})()
}, [])
return {data,error,loading}
}
export default useFetch;
我将其导入到用户组件中,如下所示。
const {data,error,loading} = useFetch('http://localhost:4040/users');
通常我会传递 UseEffect
的第二个参数,例如 [users.length]
以使用户数据具有反应性,但因为这是一个自定义 Hook 并在许多组件中使用,
当用户数据更改或更新时,如何使用户数据使用react?
最佳答案
您可以将依赖项数组作为可选参数传递给自定义 Hook 。
const useFetch = async (url, deps) => {
const [data,setData] = useState(null);
const [error,setError] = useState(null);
const [loading,setPending] = useState(false);
useEffect(() => {
(async()=>{
const abortCont = new AbortController();
const token = await getToken();
try {
setPending(true);
const response = await fetch(url,{
signal : abortCont.signal,
headers : {
"Content-Type" : "application/json",
"Authorization" : "Bearer "+token
}
});
const result = await response.json();
setData(result);
setPending(false);
} catch (err) {
if(err.name === 'AbortError'){
abortCont.abort();
return;
}
setError(String(err));
setPending(false);
}
})()
}, deps || [])
return {data,error,loading}
}
export default useFetch;
然后这样调用它
const {data,error,loading} = useFetch('http://localhost:4040/users', [users.length]);
编辑
在您的情况下,您希望对渲染有更多的控制。所以我想说你必须修改你的钩子(Hook)以支持你安装的组件的设置数据。
const useFetch = async (url, holded, setHolded) => {
const [data,setData] = useState(null);
const [error,setError] = useState(null);
const [loading,setPending] = useState(false);
useEffect(() => {
(async()=>{
const abortCont = new AbortController();
const token = await getToken();
try {
setPending(true);
const response = await fetch(url,{
signal : abortCont.signal,
headers : {
"Content-Type" : "application/json",
"Authorization" : "Bearer "+token
}
});
const result = await response.json();
setData(result);
if(setHolded) {
setHolded(result);
}
setPending(false);
} catch (err) {
if(err.name === 'AbortError'){
abortCont.abort();
return;
}
setError(String(err));
setPending(false);
}
})()
}, (holded && setHolded && [holded,setHolded,url]) || [url])
return {data,error,loading}
}
export default useFetch;
然后这样调用它
const {data,error,loading} = useFetch('http://localhost:4040/users', users, setUsers);
关于reactjs - 自定义钩子(Hook)和动态 useEffect 依赖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67365617/