使用react-hooks在状态更新时执行异步代码

使用react-hooks在状态更新时执行异步代码

useState

状态更新完成后，setter不会提供回调，就像React类组件中的setState一样。为了复制相同的行为，您可以

componentDidUpdate

通过

useEffect

使用Hooks
在React类组件中使用类似模式的生命周期方法

useEffect

钩子将第二个参数作为值的数组，在渲染周期完成后，React需要监视这些值以进行更改。

const [loading, setLoading] = useState(false);...useEffect(() => {    doSomething(); // This is be executed when `loading` state changes}, [loading])setLoading(true);

编辑

不同于

setState

，

useState

钩子的更新程序没有回调，但是您始终可以使用a

useEffect

复制上述行为。但是，您需要确定加载变化

代码的功能方法如下所示

function usePrevious(value) {  const ref = useRef();  useEffect(() => {    ref.current = value;  });  return ref.current;}

---

const prevLoading = usePrevious(isLoading);useEffect(() => {   if (!prevLoading && isLoading) {       getOrders({          page: page + 1,          query: localQuery,          held: localHoldMode,          statuses: filterMap[filterBy],      })      .then((o) => {        const { orders: fetchedOrders } = o.data;        const allOrders = orders.concat(fetchedOrders);        setOrders(allOrders);        setPage(page + 1);        setPagesSeen([...pagesSeen, page + 1]);        setPrefetchedOrders(null);        setIsLoading(false);      })      .catch(e => console.error(e.message));   }}, [isLoading, preFetchedOrders, orders, page, pagesSeen]);const getNextPage = () => {    // This will scroll back to the top, and also trigger the prefetch for the next page on the way up.    goToTop();    if (pagesSeen.includes(page + 1)) {      return setPage(page + 1);    }    if (prefetchedOrders) {      const allOrders = orders.concat(prefetchedOrders);      setOrders(allOrders);      setPage(page + 1);      setPagesSeen([...pagesSeen, page + 1]);      setPrefetchedOrders(null);      return;    }    setIsLoading(true);  };