Отображение ошибки при отправке необязательного реквизита в дочерний компонент - PullRequest
Новая
       47

Отображение ошибки при отправке необязательного реквизита в дочерний компонент

0 голосов
/ 07 января 2020

Я пытаюсь по желанию иметь функции выбора строки, и это должно быть определено на основе реквизита, который передается от родителя. У меня есть две сетки на одной странице, где на одной есть опора, которая должна включать выбор строк, а на другой нет. Но я получаю эту ошибку "Не удается прочитать свойство 'className' из неопределенного".

Песочница: 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} />
      </>
    );
  }
}

1 Ответ

1 голос
/ 07 января 2020

В вашей функции onRowClick в DataGrid.js ваша функция ничего не будет возвращать при первом рендере (или до тех пор, пока что-то не будет щелкнуто). ReactTable ожидает чего-то здесь. Если вы предоставите пустой объект, он будет успешно отображен.

...