每当将可选道具发送到子组件时显示错误

Question

我正在尝试可选地具有 row-select 功能，这应该根据从父级传递的道具来确定。我在一个页面上有两个网格，其中一个有应该启用行 selection 的道具，另一个没有。但是我收到这个错误 "Cannot read property 'className' of undefined " .

沙盒：https://codesandbox.io/s/react-table-row-table-alternate-single-row-working-5fr81

import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";
import ShowMore from "./ShowMore";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      columns: []
    };
  }

  componentDidMount() {
    this.getData();
    this.getColumns();
  }

  getData = () => {
    const data = [
      { firstName: "Jack", status: "Submitted", items: [1, 2, 3, 4] },
      { firstName: "Simon", status: "Pending", items: [1, 2] },
      { firstName: "Syls", status: "Pending", items: [1] },
      { firstName: "Pete", status: "Approved", items: [] }
    ];
    this.setState({ data });
  };

  getColumns = () => {
    const columns = [
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Status",
        accessor: "status"
      },
      {
        Header: "Items",
        accessor: "items",
        Cell: row => <ShowMore value={row.value} />
      }
    ];
    this.setState({ columns });
  };

  onClickRow = rowInfo => {
    this.setState({ allData: rowInfo }, () => {
      console.log(this.state.allData);
    });
  };

  render() {
    return (
      <>
        <DataGrid
          data={this.state.data}
          columns={this.state.columns}
          rowClicked={this.onClickRow}
        />
        <DataGrid data={this.state.data} columns={this.state.columns} />
      </>
    );
  }
}

Answer 1

在 DataGrid.js 中的 onRowClick 函数中，您的函数 return 在首次渲染时不会return 任何内容（或直到单击某些内容）。 ReactTable 在这里期待一些东西。如果您提供一个空对象，它将成功呈现。

每当将可选道具发送到子组件时显示错误

Showing error whenever optional props are being sent to a child component

javascript

setstate

reactjs

react-table

react-hooks