React虚拟化多网格组件跳过数据集中的第一行

我对React虚拟化有一个非常基本的用法 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>
    );
  }
}

这是我的输出截图。