xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

react hooks & props change & pagination current bug

multi tables & pigination bug & current update

just listen to the props' unique value change, then update your local state!

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

import ExportableTable from '@/components/ExportableTable';
import { generateFilename } from '@/utils/exportUtils';

const TrendTable = ({
  startDate,
  endDate,
  dataSource,
  moduleName,
  analysisName,
  units,
  initCurrent,
}) => {
  const [current, setCurrent] = useState(initCurrent);
  const [tableName, setTableName] = useState(analysisName);
  // const [unmounted, setUnmounted] = useState(false);
  useEffect(() => {
    console.log(`did mount`);
    // props change
    if(tableName !== analysisName) {
      console.log(`tableName`, tableName, analysisName);
      setCurrent(1);
      setTableName(analysisName);
    }
    let unmounted = false;
    if(!unmounted) {
      // cancel update state
    }
    return () => unmounted = true;
  }, [analysisName, tableName]);

  const columns = [
    {
      title: 'date',
      dataIndex: 'date',
      key: 'date',
      align: 'center',
       150,
    },
    {
      title: analysisName,
      dataIndex: 'value',
      key: 'value',
      align: 'center',
      render: text => `${text} ${units}`,
       150,
    },
  ];

  const total = dataSource ? dataSource.length : 0;
  console.log(`total`, total, current);

  const filename = generateFilename({
    moduleName,
    analysisName,
    startDate,
    endDate,
  });

  return (
    <ExportableTable
      filename={filename}
      size="small"
      bordered={false}
      rowKey="name"
      columns={columns}
      pagination={{
        current,
        pageSize: 10,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '20'],
        showQuickJumper: true,
        showTotal: total => <span>{total} items</span>,
      }}
      dataSource={dataSource}
      defaultCurrent={1}
      onChange={(p) => {
        setCurrent(p.current);
      }}
    />
  );
};

export {
  TrendTable,
};

export default TrendTable;

solution

https://github.com/facebook/react/issues/14830#issuecomment-550211522

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

import ExportableTable from '@/components/ExportableTable';
import { generateFilename } from '@/utils/exportUtils';

const TrendTable = ({
  startDate,
  endDate,
  dataSource,
  moduleName,
  analysisName,
  units,
  initCurrent,
}) => {
  const [current, setCurrent] = useState(initCurrent);
  const [tableName, setTableName] = useState(analysisName);
  useEffect(() => {
    let unmounted = false;
    if(!unmounted) {
      if(tableName !== analysisName) {
        setCurrent(1);
        setTableName(analysisName);
      }
    }
    return () => unmounted = true;
  }, [analysisName, tableName]);

  const columns = [
    {
      title: '日期',
      dataIndex: 'date',
      key: 'date',
      align: 'center',
       150,
    },
    {
      title: analysisName,
      dataIndex: 'value',
      key: 'value',
      align: 'center',
      render: text => `${text} ${units}`,
       150,
    },
  ];

  const total = dataSource ? dataSource.length : 0;
  console.log(`total`, total, current);

  const filename = generateFilename({
    moduleName,
    analysisName,
    startDate,
    endDate,
  });

  return (
    <ExportableTable
      filename={filename}
      size="small"
      bordered={false}
      rowKey="name"
      columns={columns}
      pagination={{
        current,
        pageSize: 10,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '20'],
        showQuickJumper: true,
        showTotal: total => <span>共 {total} 条记录</span>,
      }}
      dataSource={dataSource}
      defaultCurrent={1}
      onChange={(p) => {
        setCurrent(p.current);
      }}
    />
  );
};

export {
  TrendTable,
};

export default TrendTable;

---