React Virtualized Table示例运行报错：数据传递方式错误求助

Hey there! Let's fix that list is undefined error you're hitting with React Virtualized's Table component. The core issue here is likely that your TableExample component isn't properly accessing the list prop you're passing from App, plus React Virtualized's Table has specific required props you need to configure correctly.

Let's walk through a complete, working implementation step by step:

First, make sure you've installed the dependency #

Run this in your project root:

npm install react-virtualized
# or
yarn add react-virtualized

Here's the corrected full code for App.js #

import React, { Component } from 'react';
import { Table, Column } from 'react-virtualized';
import 'react-virtualized/styles.css'; // Don't forget this—styles are critical for the table to render properly

// Your TableExample component, now properly receiving and using the list prop
class TableExample extends Component {
  render() {
    // Pull the list from props (this is the part you were missing!)
    const { list } = this.props;

    // Required: A function to fetch rows by index
    const rowGetter = ({ index }) => list[index];

    return (
      <Table
        width={800} // Set a fixed width for the table
        height={400} // Set a fixed height (virtualization needs this)
        headerHeight={50} // Height of the header row
        rowHeight={50} // Height of each data row
        rowCount={list.length} // Total number of rows to render
        rowGetter={rowGetter} // Function to get row data by index
      >
        {/* Define your columns—each needs a label, width, and dataKey (matches your data object keys) */}
        <Column
          label="ID"
          dataKey="id"
          width={150}
        />
        <Column
          label="Value"
          dataKey="value"
          width={150}
        />
      </Table>
    );
  }
}

class App extends Component {
  render() {
    // Updated data to be an array of objects (works better with React Virtualized's Column component)
    const data = [
      { id: 1, value: 1 },
      { id: 2, value: 2 },
      { id: 3, value: 3 },
      { id: 4, value: 4 },
      { id: 5, value: 5 },
      { id: 6, value: 6 },
      { id: 7, value: 7 },
      { id: 8, value: 8 },
      { id: 9, value: 9 },
      { id: 10, value: 10 },
    ];

    return (
      <div className="App">
        <TableExample list={data} />
      </div>
    );
  }
}

export default App;

Key fixes and explanations: #

• Accessing the prop: In your original TableExample, you weren't pulling list from this.props (if it's a class component) or the props parameter (if it's a function component). That's why React was throwing "list is undefined".
• Required Table props: React Virtualized's Table relies on these mandatory props to handle virtualization:
  • width/height: Fixed dimensions so the component knows which rows to render in the viewport
  • rowCount: Total number of rows in your dataset
  • rowGetter: Function that returns the row data for a given index
• Styles: The react-virtualized/styles.css import ensures the table renders with proper layout—skip this and you'll get messy, unformatted content.

If you want to use your original array of numbers instead of objects: #

Adjust the TableExample like this to handle plain number values:

class TableExample extends Component {
  render() {
    const { list } = this.props;
    const rowGetter = ({ index }) => list[index];

    return (
      <Table
        width={800}
        height={400}
        headerHeight={50}
        rowHeight={50}
        rowCount={list.length}
        rowGetter={rowGetter}
      >
        <Column
          label="Number"
          width={200}
          // Use cellRenderer to display the raw number value
          cellRenderer={({ cellData }) => cellData}
        />
      </Table>
    );
  }
}

That should get your table up and running without the undefined error!

内容的提问来源于stack exchange，提问作者Trev14