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

【问题标题】：React Virtualized MultiGrid component skips first row in data setReact Virtualized MultiGrid 组件跳过数据集中的第一行
【发布时间】：2018-08-20 17:54:24
【问题描述】：

我对 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>
    );
  }
}

这是我输出的截图。

【问题讨论】：

在cellRenderer 内，当您在rowIndex === 0 时返回列名而不是数据本身
这实际上是有道理的，但是我不知道如何拥有标题和第一行。

标签： javascript reactjs react-virtualized

【解决方案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。

【讨论】：