问题描述
我正在使用 ReactDOM 来呈现我的 React 组件（React 数据网格），但它给出了一条错误消息：TypeError：无法在网格的 useViewPortRows.ts TypeScript 文件中读取未定义的属性“长度”。我检查了我的代码，我没有在任何地方引用任何长度属性。如何将我的 React Data Grid 渲染到屏幕上？
这是错误日志输出：
TypeError: Cannot read property 'length' of undefined
(anonymous function)
C:/kilostep_material/src/hooks/useViewportRows.ts:31
28 | expandedGroupIds
29 | }: ViewportRowsArgs<R>) {
30 | const [groupedRows,rowsCount] = useMemo(() => {
> 31 | if (groupBy.length === 0 || !rowGrouper) return [undefined,rawRows.length];
32 |
33 | const groupRows = (rows: readonly R[],[groupByKey,...remainingGroupByKeys]: readonly string[],startRowIndex: number): [GroupByDictionary<R>,number] => {
34 | let groupRowsCount = 0;
View compiled
▶ 3 stack frames were collapsed.
useViewportRows
C:/kilostep_material/src/hooks/useViewportRows.ts:30
27 | rowGrouper,28 | expandedGroupIds
29 | }: ViewportRowsArgs<R>) {
> 30 | const [groupedRows,rowsCount] = useMemo(() => {
31 | if (groupBy.length === 0 || !rowGrouper) return [undefined,number] => {
View compiled
DataGrid
C:/kilostep_material/src/DataGrid.tsx:268
265 | rawGroupBy: rowGrouper ? rawGroupBy : undefined
266 | });
267 |
> 268 | const { rowOverscanStartIdx,rowOverscanEndIdx,rows,rowsCount,isGroupRow } = useViewportRows({
| ^ 269 | rawRows,270 | groupBy,271 | rowGrouper,View compiled
▶ 17 stack frames were collapsed.
Module.<anonymous>
C:/kilostep_material/kilostep/src/index.js:49
46 | }
47 |
48 | const rootElement = document.getElementById("root");
> 49 | ReactDOM.render(<Example />,rootElement);
50 |
51 |
View compiled
Module../src/index.js
http://localhost:3001/static/js/main.chunk.js:205:30
__webpack_require__
C:/kilostep_material/kilostep/webpack/bootstrap:851
848 |
849 | __webpack_require__.$Refresh$.init();
850 | try {
> 851 | modules[moduleId].call(module.exports,module,module.exports,hotCreateRequire(moduleId));
| ^ 852 | } finally {
853 | __webpack_require__.$Refresh$.cleanup(moduleId);
854 | }
View compiled
fn
C:/kilostep_material/kilostep/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
1
http://localhost:3001/static/js/main.chunk.js:311:18
__webpack_require__
C:/kilostep_material/kilostep/webpack/bootstrap:851
848 |
849 | __webpack_require__.$Refresh$.init();
850 | try {
> 851 | modules[moduleId].call(module.exports,hotCreateRequire(moduleId));
| ^ 852 | } finally {
853 | __webpack_require__.$Refresh$.cleanup(moduleId);
854 | }
View compiled
checkDeferredModules
C:/kilostep_material/kilostep/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--,1);
> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 |
View compiled
Array.webpackJsonpCallback [as push]
C:/kilostep_material/kilostep/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules,executeModules || []);
30 |
31 | // run deferred modules when all chunks ready
> 32 | return checkDeferredModules();
| ^ 33 | };
34 | function checkDeferredModules() {
35 | var result;
View compiled
(anonymous function)
http://localhost:3001/static/js/main.chunk.js:1:69
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.
这是我浏览器开发者控制台的输出：
index.js:1 The above error occurred in the <ForwardRef(DataGrid)> component:
at DataGrid (http://localhost:3001/static/js/0.chunk.js:4736:12)
at Example (http://localhost:3001/static/js/main.chunk.js:83:5)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1
react-dom.development.js:23275 Uncaught TypeError: Cannot read property 'length' of undefined
at useViewportRows.ts:31
at mountMemo (react-dom.development.js:15846)
at Object.useMemo (react-dom.development.js:16219)
at useMemo (react.development.js:1532)
at useViewportRows (useViewportRows.ts:30)
at DataGrid (DataGrid.tsx:268)
at renderWithHooks (react-dom.development.js:14985)
at updateForwardRef (react-dom.development.js:17044)
at beginWork (react-dom.development.js:19098)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at beginWork$1 (react-dom.development.js:23964)
at performUnitOfWork (react-dom.development.js:22776)
at workLoopSync (react-dom.development.js:22707)
at renderRootSync (react-dom.development.js:22670)
at performSyncWorkOnRoot (react-dom.development.js:22293)
at scheduleUpdateOnFiber (react-dom.development.js:21881)
at updateContainer (react-dom.development.js:25482)
at react-dom.development.js:26021
at unbatchedUpdates (react-dom.development.js:22431)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020)
at Object.render (react-dom.development.js:26103)
at Module.<anonymous> (index.js:49)
at Module../src/index.js (index.js:50)
at __webpack_require__ (bootstrap:851)
at fn (bootstrap:150)
at Object.1 (styles.css?3fab:82)
at __webpack_require__ (bootstrap:851)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1
这是我的 index.js 文件的样子：
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from "react-data-grid";
import "./styles.css";
const columns = [
{ key: "id",name: "ID",editable: true },{ key: "title",name: "Title",{ key: "complete",name: "Complete",editable: true }
];
const rows = [
{ id: 0,title: "Task 1",complete: 20 },{ id: 1,title: "Task 2",complete: 40 },{ id: 2,title: "Task 3",complete: 60 }
];
class Example extends React.Component {
state = { rows };
onGridRowsUpdated = ({ fromRow,toRow,updated }) => {
this.setState(state => {
const rows = state.rows.slice();
for (let i = fromRow; i <= toRow; i++) {
rows[i] = { ...rows[i],...updated };
}
return { rows };
});
};
render() {
return (
<ReactDataGrid
columns={columns}
rowGetter={i => this.state.rows[i]}
rowsCount={3}
onGridRowsUpdated={this.onGridRowsUpdated}
enableCellSelect={true}
/>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Example />,rootElement);
我直接从 Adazzle 的 React Data Grid 的 SimpleGrid 示例中复制粘贴了这段代码，该示例在其沙箱上运行良好。
这是我的 package.json 文件：
{
"name": "kilostep","version": "0.1.0","private": true,"dependencies": {
"axios": "^0.21.1","proxy": "http://localhost:3000","react": "^17.0.1","react-data-grid": "^7.0.0-canary.37","react-data-grid-addons": "^7.0.0-alpha.24","react-dom": "^17.0.1","react-scripts": "4.0.1","web-vitals": "^0.2.4"
},"scripts": {
"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"
},"eslintConfig": {
"extends": [
"react-app","react-app/jest"
]
},"browserslist": {
"production": [
">0.2%","not dead","not op_mini all"
],"development": [
"last 1 chrome version","last 1 firefox version","last 1 safari version"
]
},"devDependencies": {
"@types/react-dom": "^17.0.2"
}
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）