如何正确使用 useEffect 进行带有 react 的异步获取调用? react-hooks/exhaustive-

Question

嗨，我在 React 中遇到useEffect钩子的问题。下面的代码工作正常，但 es-lint 建议我需要在useEffect的依赖项数组中提供依赖项。

使用// eslint-disable-next-line react-hooks/exhaustive-deps的工作代码

export default function UsersList() {
const [users, setUsers] = useState<User[]>([]);

const { setError } = useContext(errorContext);
const { isLoading, setIsLoading } = useContext(globalContext);

useEffect(() => {
if (users.length < 1) {
fetchUsers();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
async function fetchUsers () {
try {
setIsLoading(true);
const fetchedUsers = await api.getUsers();
setUsers(fetchedUsers);
} catch (error) {
setError(error);
} finally {
setIsLoading(false);
}
}
}

无限循环代码

我试着这样写代码触发无限循环。(因为状态在函数内部不断变化，并且由于声明的依赖项，每次都会触发useEffect(

useEffect(() => {
async function fetchUsers () {
try {
setIsLoading(true);
const fetchedUsers = await api.getUsers();
setUsers(fetchedUsers);
} catch (error) {
setError(error);
} finally {
setIsLoading(false);
}
}
if (users.length < 1) {
fetchUsers();
}
}, [setIsLoading, setError, users]);

我还尝试将fetchUsers()放入依赖项数组中，但这没有效果。

如何在组件挂载时正确设置异步调用而无需使用// eslint-disable-next-line react-hooks/exhaustive-deps？

Answer 1

您的fetchUsers函数会随着每次渲染触发使用效果重新创建自身。您必须通过用useCallback包装它来使其引用在渲染中保持一致，请参阅 https://reactjs.org/docs/hooks-reference.html#usecallback

此外，为了确保我们只调用一次 useEffect(当第一次渲染发生时(，我们可以使用 useRef 来存储一个布尔值，这将防止 useEffect 来自无限循环。

export default function UsersList() {
const [users, setUsers] = useState<User[]>([]);

const { setError } = useContext(errorContext);
const { isLoading, setIsLoading } = useContext(globalContext);
const fetchUsers = useCallback(async function () {
try {
setIsLoading(true);
const fetchedUsers = await api.getUsers();
setUsers(fetchedUsers);
} catch (error) {
setError(error);
} finally {
setIsLoading(false);
}
}, [setIsLoading, setUsers, setError]);
// Added a ref here to ensure that we call this function only once in initial render
// If you need to refetch the users on error, just call fetchUsers
const isFetchedRef = useRef(false);
useEffect(() => {
if (!isFetchedRef.current) {
isFetchedRef.current = true;
fetchUsers();
}
}, [isLoading, fetchUsers]);
}