使用按钮重新加载 React-Table

Question

目标：
按下按钮 reload 以重新加载 react-table.

的内容

问题：
我在 Stackblitz 和本地开发计算机上使用的相同代码，它不起作用。

我缺少什么部分？

信息：
*反应中的新功能-table
*使用打字稿

堆栈闪电战：
https://stackblitz.com/edit/react-ts-cbvmnt

谢谢！

app.tsx

import React, { useState, useEffect } from 'react';
import { useTable, Column, useSortBy } from 'react-table';
import axios from 'axios';

const columns: Column<Data>[] = [
  {
    Header: 'login',
    accessor: 'login',
  },
  {
    Header: 'id',
    accessor: 'id',
  },
  {
    Header: 'node id',
    accessor: 'node_id',
  },
  {
    Header: 'type',
    accessor: 'type',
  },
];

interface Data {
  login: number;
  id: string;
  node_id: string;
  type: string;
}

export default function App() {
  const [data, setData] = useState([]);
  React.useMemo(
    () =>
      handleData().then((res) => {
        setTimeout(() => {
          setData(res);
        }, 1000);
      }),
    []
  );

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable<Data>({ columns, data }, useSortBy);

  async function handleData() {
    const handleDataaa = async () => {
      const resp = await axios.get('https://api.github.com/users');
      return await resp.data;
    };

    return Promise.resolve(handleDataaa());
  }

  useEffect(() => {
    handleData();
  }, []);

  const clickclick = () => {
    axios.get<Data[]>('https://api.github.com/users').then((response) => {
      setData(response.data);
    });
  };

  return (
    <div>
      <button onClick={clickclick}>Reload</button>
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                  {console.log(column.getSortByToggleProps())}
                  {column.render('Header')}
                  <span>
                    {' '}
                    {column.isSorted
                      ? column.isSortedDesc
                        ? ' '
                        : ' '
                      : ''}{' '}
                  </span>
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row, i) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  return (
                    <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                  );
                })}
              </tr>
            );
          })}
          {rows.length === 0 && (
            <tr>
              <td colSpan={2}>loading...</td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}

反应-table.d.tsx

import {
  UseSortByColumnOptions,
  UseSortByColumnProps,
  UseSortByInstanceProps,
  UseSortByOptions,
  UseSortByState,
} from 'react-table';

declare module 'react-table' {
  export interface TableOptions<D extends object> extends UseSortByOptions<D> {}

  export interface TableInstance<D extends object = {}>
    extends UseSortByInstanceProps<D> {}

  export interface TableState<D extends object = {}>
    extends UseSortByState<D> {}

  export interface Column<D extends object = {}>
    extends UseSortByColumnOptions<D> {}

  export interface ColumnInstance<D extends object = {}>
    extends UseSortByColumnProps<D> {}
}

Answer 1

您输入的状态有误，TypeScript 会警告您。

当您在 useState 中传递默认值 [] 时，TypeScript 假定数组中永远不会有任何内容，因此是 never[] 类型。您需要执行 useState<Data[]>([])，这将告诉 TypeScript 状态的正确类型。

使用按钮重新加载 React-Table

Reload the React-Table with button

typescript

react-tsx

react-table