Question

我正在尝试使用Typescript实现“材料表”库并做出反应，但结果是空白页且没有编译错误。

环境配置：

npm: 6.11.3
nodejs: 10.17.0
typescript: 3.7.2

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "typeRoots": ["node_modules/@types"],
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "jsx": "react",
    "lib": ["dom", "dom.iterable", "esnext", "esnext.intl", "es2017.intl", "es2018.intl"],
    "allowJs": false,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": false,
    "noEmit": true,
    "preserveConstEnums": true,
    "noImplicitAny": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

JSX

  return (
    <MaterialTable<RowInterface>
      title={intl.formatMessage({ id: 'table-title' })}
      columns={columns}
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      data={query =>
        getData().then(data => ({
          data,
          page: 1,
          totalCount: data.length
        }))
      }
    />
  );

为什么我指定<MaterialTable<RowInterface>？当我尝试将'data'属性设置为从远程（https://material-table.com/#/docs/features/remote-data）获取数据的函数时，该库想知道行接口： export default class MaterialTable<RowData extends object> extends React.Component<MaterialTableProps<RowData>> {}

当前行为： 没有编译错误，空白页！

预期行为 应该呈现该应用程序，并且该表应该正确地从远程获取数据。

谢谢大家

Answer 1

您没有在诺言中返回数据，这就是为什么它为空的原因。如示例所示，返回的数据带有您未做的解析。

您必须附加一个承诺并使用正确的数据进行解析：

 data={query =>
      new Promise((resolve, reject) => {
        getData()
         .then(data => resolve(
            {
              data: result.data,
              page: result.page - 1,
              totalCount: result.total,
            })
      })
    }

打字稿/反应/材料表-没有错误和空白页

1 个答案: