Блог

Код, с которым я запускаю:

 import React from "react"; 
import ReactDataGrid from "react-data-grid";
const styles = {
    fontFamily: "sans-serif",
    textAlign: "center"};

const Example = () => { 
  const columns = [
    { key: "id", name: "ID" },
    { key: "title", name: "Title" },
    { key: "count", name: "Count" }
  ];
  const data = [
    { id: 0, title: "row1", count: 20 },
    { id: 1, title: "row1", count: 40 },
    { id: 2, title: "row1", count: 60 }
  ];
  return (
    <div style={styles}>
      <div>
        <ReactDataGrid
          columns={columns}
          rowGetter={i => data[i]}
          rowsCount={3}
          minHeight={150}
        />
      </div>
    </div>
  );
};
export default Example;
  

Вот сообщение об ошибке

Даже тот же пример в их официальном веб-сайте выдает ту же ошибку. Итак, есть ли какие-либо предложения по этому поводу?

Зависимости, которые автоматически устанавливаются для проекта:

 "@emotion/react": "11.0.0",
"@emotion/styled": "11.0.0",
"@inovua/reactdatagrid-enterprise": "^4.0.8",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"jquery": "^3.5.1",
"react": "^17.0.1",
"react-data-grid": "^7.0.0-canary.33",
"react-dom": "^17.0.1",
"react-hover": "^2.0.0",
"react-icons": "^3.11.0",
"react-lightbox-component": "^1.2.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"react-scroll": "^1.8.1",
"react-select": "^3.1.0",
"stream-chat": "^2.7.4",
"stream-chat-react": "^3.2.2",
"styled-components": "^5.2.1",
"twin.macro": "^1.0.0-alpha.7",
"typescript": "^4.0.5",
"web-vitals": "^0.2.4"
  

Любые предложения будут оценены. Спасибо!

попробуйте

 return (
        <ReactDataGrid rows={rows}
                       columns={columns}/>
    );
  

Даже нет упоминания о rows prop в документации, которая кажется устаревшей

источник : https://github.com/adazzle/react-data-grid/issues/2030