在 React 项目中，我们经常需要使用 Ajax 请求来获取数据。然而，有时候我们会遇到 Ajax 请求一直处于 pending 状态的问题，导致页面无法正常渲染。本文将介绍这个问题的原因，以及如何解决它。
问题原因
在 React 中，当组件的 props 或 state 发生变化时，组件会重新渲染。如果在组件重新渲染的过程中发起了 Ajax 请求，那么可能会出现请求一直处于 pending 状态的问题。
这是因为每次组件重新渲染时，都会重新创建一个新的 Ajax 请求。如果前一个请求还没有完成，那么新的请求就会一直处于等待状态。这就是所谓的“请求阻塞”。
解决方法
1. 使用 useEffect
使用 useEffect 钩子函数可以解决这个问题。useEffect 可以让我们在组件渲染完成后执行一些副作用操作，比如发起 Ajax 请求。
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
------ ----- ---- --------
-------- ------------------ -
----- ------ -------- - ---------------
------------ -- -
------------------------------------ -- -
-----------------------
---
-- ------------------
-- ----
------ -
-----------------
--
-在这个例子中，我们使用了 useEffect 钩子函数来发起 Ajax 请求。useEffect 的第一个参数是一个函数，这个函数会在组件渲染完成后执行。我们在这个函数中使用 axios 发起 Ajax 请求，并将返回的数据保存到组件的 state 中。
useEffect 的第二个参数是一个数组，这个数组中包含了所有可能影响 Ajax 请求的 props 或 state。如果这些值发生变化，useEffect 就会重新执行。这样就可以保证每次渲染都只会发起一次 Ajax 请求。
2. 使用 useCallback
使用 useCallback 钩子函数也可以解决这个问题。useCallback 可以让我们缓存一个函数，避免在每次渲染时都重新创建一个新的函数。
-- -------------------- ---- -------
------ - --------- ----------- - ---- --------
------ ----- ---- --------
-------- ------------------ -
----- ------ -------- - ---------------
----- --------- - -------------- -- -
------------------------------------ -- -
-----------------------
---
-- ------------------
-- ---------- --------- --
------------ -- -
------------
-- -------------
-- ----
------ -
-----------------
--
-在这个例子中，我们使用了 useCallback 钩子函数来缓存 fetchData 函数。我们在 useEffect 中调用这个函数，这样就可以保证每次渲染都只会执行一次 fetchData 函数。
3. 使用 Redux
使用 Redux 可以更好地管理组件的状态和数据流。在 Redux 中，我们可以将 Ajax 请求的状态保存在 store 中，这样就可以避免在组件重新渲染时重新发起请求。
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
------ - --------- - ---- ------------
-------- ------------------ -
----- ---- - ----------------- -- ------------
----- -------- - --------------
------------ -- -
----------------------
-- ------------
-- ----
------ -
-----------------
--
-在这个例子中，我们使用了 useSelector 钩子函数来从 store 中获取数据。我们使用 useDispatch 钩子函数来获取 dispatch 函数，这个函数可以用来触发 action。我们在 useEffect 中触发 fetchData action，这个 action 会发起 Ajax 请求，并将返回的数据保存到 store 中。
结论
在 React 中，Ajax 请求一直 pending 的问题是很常见的。我们可以使用 useEffect、useCallback 或 Redux 来解决这个问题。不同的解决方法适用于不同的场景，需要根据具体情况进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676a2a5944e319dee41afbc6