如何在具有适当依赖关系的React中使用useState、useEffect和useCallback在特定间隔后提取数据

Question

我正试图在特定间隔后从中获取相机。一旦我获取了所有的相机，我就会将相机设置为本地状态，但如果我尝试console.log，我将一无所获

const [allCameras, setAllCameras] = useState()
const fetchAllCameras = useCallback(async () => {
try {
const res = await getAllCameras();
if(res.data.status_code === 0 && res.data.data){
setAllCameras(res.data.data)
}
} catch (err) {
console.error(err);
}
}, [])
const _fetchData = useCallback(async () => {
fetchAllCameras()
if(allCameras){
// Nothing gets logged
console.log("allCameras", allCameras)
}
// If I add allCameras as a dependency it triggers an infinite loop
}, [fetchAllCameras])
useEffect(() => {
_fetchData();
const intervalID = setInterval(() => {
_fetchData();
}, FETCH_INTERVAL * 1000);
return () => clearInterval(intervalID);
}, [_fetchData]);  

Answer 1

尝试对代码应用一些修复：

• 每个useEffect都应该有一个单独的责任
• useCallback在这里是有争议的不必要的(你试图记住什么？你衡量了性能问题？(
• allCameras值上有一个闭包，将其移动以分离useEffect

const [allCameras, setAllCameras] = useState();
const fetchData = () => {
const fetchAllCameras = async () => {
try {
const res = await getAllCameras();
if (res.data.status_code === 0 && res.data.data) {
setAllCameras(res.data.data);
}
} catch (err) {
console.error(err);
}
};
fetchAllCameras();
};
// On Mount
useEffect(() => {
fetchData();
}, []);
// Interval
useEffect(() => {
const intervalID = setInterval(() => {
fetchData();
}, FETCH_INTERVAL * 1000);
return () => clearInterval(intervalID);
}, []);
// Check state
useEffect(() => {
console.log(allCameras);
}, [allCameras]);

在useEffect用例中阅读更多信息。