reactjs - React useState 等待状态被设置

Question

我正在将 React 组件转换为函数，但我不习惯 React useHooks。我已将以下内容从

handleRequestSort = (event, property) => {
    const { orderBy, order } = this.state;
    const isAsc = orderBy === property && order === "asc";
    this.setState(
      {
        order: isAsc ? "desc" : "asc",
        orderBy: property
      },
      this.getRows
    );
};

至

function handleRequestSort(event, property) {
    const isAsc = orderBy === property && order === "asc";
    setOrder(isAsc ? "desc" : "asc");
    setOrderBy(property);
    getRows();
}

但问题是现在 getRows() 在 order 和 orderBy 状态设置之前运行，这搞砸了我的 getRows 功能

任何帮助都将是极大的欢呼。

标签： reactjs

Answer 1

您可以使用 use-state-with-callback 库

https://www.npmjs.com/package/use-state-with-callback

import useStateWithCallback from 'use-state-with-callback';

const Index = () => {
    const [orderState, setOrderState] = useStateWithCallback({}, (state) => {
        const {orderBy, order} = state;
        if(order && orderBy){
            getRows()
        }
    })

    const {orderBy, order} = orderState;

    const handleRequestSort = (event, property) => {
        const isAsc = orderBy === property && order === "asc";
        setOrderState({
            order : isAsc ? "desc" : "asc",
            orderBy : property
        })
    }

    return(...)
}

或者

import React, {useEffect, useState} from 'react';

const Index = () => {
    const [orderState, setOrderState] = useState({});

    const {orderBy, order} = orderState;

    const handleRequestSort = (event, property) => {
        const isAsc = orderBy === property && order === "asc";
        setOrderState({
            order : isAsc ? "desc" : "asc",
            orderBy : property
        })
    }

    useEffect(() => {
        if(orderBy && order){
            getRows()
        }
    },[orderState])

    return (...)
}