Question

好吧，我正在尝试为我的自定义 react-data-talbe-component 计算偏移值

在代码中，“offset”应该包含基于我的计算的新偏移值（offset = page * countPerpage）

但它似乎包含以前的值。添加测试代码（ console.log ）用于偏移值表示。

我的提问主要是基于我代码中的getTableList()。

在初始渲染表格时，console.log 打印 10，因为初始值为 10（同时，page 为 1，counterPerpage 为 10）
当我单击“下一步”按钮进行分页时，console.log 打印 10 << 它是错误的，它应该是 20 因为与此同时，page 是 2，counterPerpage 是 10 --> 2 * 10 = 20)
当我单击“上一个”按钮进行分页时，console.log 打印 20 << 它又错了，它应该是 10 因为与此同时，页面现在是 1， counterPerpage 是 10 --> 1 * 10 = 10）。

似乎函数(console.log) 打印了以前的偏移值。我应该如何修复以打印偏移量的当前值？



  const Table: React.FunctionComponent<Props> = ({ tableData, query, subURL}) => {
    const columns = [

      //TODO
        {
          name: tableData.mata? tableData.meta.firstColum : 'Avatar',
          cell: (row : any) => <img height="30px" width="30px" alt={row.first_name} src={row.avatar} />
        },
        {
          name: tableData.mata? tableData.meta.secondColum : 'First Name',
          selector: 'first_name'
        },
        {
          name: tableData.mata? tableData.meta.thirdColum : 'Last Name',
          selector: 'last_name'
        },
        {
          name: tableData.mata? tableData.meta.fourthColum : 'e-mail',
          selector: 'email'
        }
      ];
    
    const [page, setPage] = useState(1);
    const [countPerPage, setCountPerPage] = useState(query);
    const [users, setUsers] = useState<any>({tableData});
    const isMounted = useRef(false);

    //
    const [offset, setOffset] = useState(10);
    //

    const getTableList = async () => {
      
        const response = await apiProvider.getTabledata(page, countPerPage, subURL);
        console.log("The offset is: " , offset);
        setUsers(response);
        
        setOffset((page * countPerPage));

        console.log("The offset is now: " , offset);
      }
      useEffect(() => {
        setCountPerPage(query)
      } , [query])

      useEffect(() => {
        if(isMounted.current) {
  
       
        getTableList();
        } else {
          isMounted.current = true;
        }
      }, [page, countPerPage, tableData]);
    
    return (
        <>
        <DataTable
          title="Table (Server side Pagination)"
          columns={columns}
          data={users.data}
          highlightOnHover
          pagination
          paginationServer
          paginationTotalRows={users.total}
          paginationPerPage={countPerPage}
          paginationRowsPerPageOptions={[5, 10, 25, 50, 100]}
          paginationComponentOptions={{
            noRowsPerPage: false
          }}
          onChangeRowsPerPage= { rowsPerPage => setCountPerPage(rowsPerPage)}
          onChangePage={page => setPage(page)}
        />
      </>
    );
  };
  
  
  export default Table;

反应 useState 打印以前的值

0 个答案: