React useState & useEffect All in One

React useState & useEffect All in One

useState & useEffect

https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/

https://reactjs.org/docs/hooks-reference.html#useeffect

https://reactjs.org/docs/hooks-effect.html

---

antd table

antd table 修复 分页初始值 bug

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

  const [current, setCurrent] = useState(1);
  const [tableData, setTableData] = useState(regions);
  useEffect(() => {
    setCurrent(1);
    let isSubscribed = true;
    if(isSubscribed) {
       // cancel promise
    }
    return () => isSubscribed = false;
  }, [adcode, regionData, regionName, regions]);

  useEffect(() => {
    setCurrent(1);
    let isSubscribed = true;
    if(isSubscribed) {
      getRegionName(adcode).then(setRegionName);
    }
    const promises = [];
    regions.forEach(item => {
      promises.push(
        getRegionName(item.code)
        .then(name => {item.name = name;})
        // eslint-disable-next-line no-console
        .catch(() => console.log('获取%s地名失败', item.code)),
      );
    });
    // 后端传来部分区划代码是错误的，找不到对应地名，暂时先剔除
    Promise
    .all(promises)
    .then(() => {
      if(isSubscribed) {
        return setTableData(regions.filter(({ name }) => name));
      }
    });
    return () => isSubscribed = false;
  }, [adcode, regionData, regionName, regions]);

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

export excel

import XLSX from 'xlsx';

import { Table, Button } from 'antd';
// import { exportExcel } from '@/utils/exportUtils';
import { exportExcel } from '../../utils/exportUtils';

function noop() {}

const ExportableTable = props => {
  const { filename, title = noop, columns, dataSource } = props;

  const _export = () => {
    exportExcel({ name: filename, columns, dataSource });
  };

  // 追加导出按钮
  const _renderTitle = () => {
    return (
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <div>{title()}</div>
        <Button icon="download" size="small" onClick={_export}>
          导出
        </Button>
      </div>
    );
  };

  return <Table {...props} title={_renderTitle} />;
};

export default ExportableTable;

const exportExcel = ({ name, columns, dataSource }) => {
  const sheetName = 'sheet';
  const aoa = transformAOA({ columns, dataSource });

  const sheet = XLSX.utils.aoa_to_sheet(aoa);

  const workbook = {
    SheetNames: [sheetName],
    Sheets: { [sheetName]: sheet },
  };
  const opts = { bookSST: false, type: 'binary' };

  XLSX.writeFile(workbook, `${name}.xlsx`, opts);
};

refs

React useEffect 完整指南

https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---