Typescript/react/material-table - 没有错误和空白页答案

【问题标题】：Typescript/react/material-table - No errors and blank pageTypescript/react/material-table - 没有错误和空白页
【发布时间】：2019-12-11 15:49:57
【问题描述】：

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

环境配置：

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>？当我尝试将“数据”属性设置为从远程 (https://material-table.com/#/docs/features/remote-data) 获取数据的函数时，库想知道行接口： export default class MaterialTable<RowData extends object> extends React.Component<MaterialTableProps<RowData>> {}

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

预期行为 应用程序应该被渲染并且表格应该正确地从远程获取数据。

谢谢大家

【问题讨论】：

在你的组件中放置一个调试器或断点，看看它是否在渲染方法中停止
不，它不会停止，也不会在渲染函数之外。

标签： reactjs typescript material-table

【解决方案1】：

您没有返回承诺中的数据，这就是为什么它是空白的。如示例所示，数据是通过解析返回的，而您没有这样做。

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

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

【讨论】：