Question

我对React Virtualized MultiGrid组件有一个非常基本的用法，在这里我只是呈现一个从1到100的数字表。

由于某种原因，第一行将无法呈现。换句话说，表格始终从数字2开始。

这是我的代码。

const Container = {
  width: "90%",
  height: "100vh",
  margin: "auto",
};

class App extends Component {

  state = {
    data: [],
    sort: {
      column: "",
      descending: false,
    },
  };

  componentDidMount() {
    const numbers = [];
    for (let i = 0; i < 100; i++) {
      numbers.push(i + 1);
    }
    const final = numbers.map(n => {
      return {
        single: n,
        double: n * 2,
        triple: n * 3
      };
    });
    this.setState({ data: final });
  }

  cellRenderer = (data, columns) => {
    if (data.rowIndex === 0) {
      return (
        <span
          style={data.style}
          key={data.key}
        >
          {columns[data.columnIndex]}
        </span>
      );
    }
    const column = columns[data.columnIndex];
    return (
      <span
        style={data.style}
        key={data.key}
      >
        {this.state.data[data.rowIndex][column]}
      </span>
    );
  }

  render() {
    const columns = ["single", "double", "triple"];
    return (
      <div style={Container}>
        <AutoSizer>
          {({ width, height }) => (
            <MultiGrid
              columnWidth={70}
              width={width}
              height={height}
              cellRenderer={(data) => this.cellRenderer(data, columns)}
              fixedRowCount={1}
              rowHeight={70}
              columnCount={3}
              rowCount={this.state.data.length}
            />
          )}
        </AutoSizer>
      </div>
    );
  }
}

这是我的输出的屏幕截图。

Answer 1

感谢多伦（Doron）的评论，我认为它可以正常工作。

这是具有相关更改的代码。

const Container = {
  width: "90%",
  height: "100vh",
  margin: "auto",
};

class App extends Component {

  state = {
    data: [],
    sort: {
      column: "",
      descending: false,
    },
  };

  componentDidMount() {
    const numbers = [];
    for (let i = 0; i < 100; i++) {
      numbers.push(i + 1);
    }
    const final = numbers.map(n => {
      return {
        single: n,
        double: n * 2,
        triple: n * 3
      };
    });
    this.setState({ data: final });
  }

  cellRenderer = (data, columns) => {
    if (data.rowIndex === 0) {
      return (
        <span
          style={data.style}
          key={data.key}
        >
          {columns[data.columnIndex]}
        </span>
      );
    }
    const column = columns[data.columnIndex];
    return (
      <span
        style={data.style}
        key={data.key}
      >
        {this.state.data[data.rowIndex - 1][column]}
      </span>
    );
  }

  render() {
    const columns = ["single", "double", "triple"];
    return (
      <div style={Container}>
        <AutoSizer>
          {({ width, height }) => (
            <MultiGrid
              columnWidth={70}
              width={width}
              height={height}
              cellRenderer={(data) => this.cellRenderer(data, columns)}
              fixedRowCount={1}
              rowHeight={70}
              columnCount={3}
              rowCount={this.state.data.length + 1}
            />
          )}
        </AutoSizer>
      </div>
    );
  }
}

请注意，现在总行数实际上比数据数组的长度多1，然后在我的cellRenderer中对数组进行索引时，我的索引比当前索引小1。

React Virtualized MultiGrid组件跳过数据集中的第一行

1 个答案: