如何在react js功能组件中停止多个API请求

Question

我是react js的新手。我有一个函数和一个GET API请求。我需要在功能组件中调度API操作。当我调用函数分量中的dispatch函数时。它被重新渲染多次(多个请求即将到来)。当我在useEffect中使用dispatch时，我的API没有被调度。

无useEffectdispatch函数调用:(API多次调用)

export default LogoCard {
let id=1;
const dispatch = useDispatch();
dispatch(viewLogDetails(id));
}

使用useEffect调用dispatch函数。(dispatch函数未被useEffect调用)

export default LogoCard {
let id=1;
const dispatch = useDispatch();
useEffect(()=>{
dispatch(viewLogDetails(id));
},[dispatch]);
}

回来的行动:

export const viewTimeLogging = createAsyncThunk(
"logoReducer/logo/Viewlogo",
async (id, { getState }) => {
const response = await axios.get(`/viewLogDetails?id=${id}`);
let data = null;
data = await response.data;
return data.viewLogo;
}
);

Answer 1

我注意到你在调度中调用的方法有一个不同的名字。

• 如果你需要axios方法只在id改变时被调用，你应该使用带有[dispatch, id]依赖的useEffect钩子(我假设你将id作为道具传递，或者在将来以其他方式收集它，而不是像那样硬编码)。
• 如果你想在每次重新渲染组件时调用调度，你可以把它放在函数中，就像你写的第一段代码一样(但我不会这样做)。

https://codesandbox.io/s/mystifying-raman-tul4j?file=/src/App.js这里有一个沙盒，里面有你可能需要的代码