Рендеринг react-table не работает при изменении реквизита

Я использую таблица реакции и хотел бы визуализировать таблицу с / без подкомпонент на основе опоры, переданной из родительского элемента.

Я попытался обновить состояние - новый массив с data и columns, но таблица не перерисовывается.

коды

js

import React from "react";
import { render } from "react-dom";
import { makeData, Logo, Tips } from "./Utils";

// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";

const data = [
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  },
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  },
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  },
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  },
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  },
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  },
  {
    a: "32,000.02938488",
    b: "0",
    c: "32,000.02938488",
    d: "55,000"
  }
];

const columns = [
  {
    Header: "a",
    accessor: "a"
  },
  {
    Header: "b",
    accessor: "b"
  },
  {
    Header: "c",
    accessor: "c"
  },
  {
    Header: "d",
    accessor: "d"
  }
];

class Table extends React.Component {
  state = {
    columns: this.props.columns,
    data: this.props.data
  };

  componentWillReceiveProps(nextProps) {
    if (nextProps.expand !== this.props.expand) {
      console.log("update data");
      this.setState({
        columns: [...nextProps.columns],
        data: [...nextProps.data]
      });
    }
  }

  render() {
    console.log(this.props.expand);
    return (
      <div>
        {this.props.expand ? (
          <ReactTable
            data={this.state.data}
            columns={this.state.columns}
            showPagination={false}
            defaultPageSize={data.length}
            resizable={false}
            SubComponent={row => {
              return (
                <div>
                  <h1>expanded state</h1>
                </div>
              );
            }}
          />
        ) : (
          <ReactTable
            data={data}
            columns={columns}
            showPagination={false}
            defaultPageSize={data.length}
            resizable={false}
          />
        )}
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    expand: true
  };

  componentDidMount() {
    const that = this;
    setTimeout(() => {
      that.setState({ expand: false });
    }, 2000);
  }

  render() {
    const { expand } = this.state;
    return (
      <div>
        <Table columns={columns} data={data} expand={expand} />
        <br />
        <Tips />
        <Logo />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

выглядит как ошибка, которая после установки SubComponent никогда не может быть отключена (componentDidMount или конструктор). Обновил код здесь. Может вам стоит подать вопрос здесь

HMR 31.10.2018 12:45
Здесь - это обходной путь, который заставит response-table отключаться и перемонтироваться при изменении расширения.
HMR 31.10.2018 13:18

@HMR Спасибо. Может быть, вы можете написать свой второй комментарий в качестве ответа, и я смогу закрыть этот вопрос.

Matt 31.10.2018 13:55
2
3
3 613
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Глядя в исходный код, вы должны иметь возможность сбросить подкомпонент, но вы не можете этого сделать, установив для него значение undefined (что-то связано с тем, как реквизиты не будут перезаписывать состояние, если оно не определено в реквизитах).

Установка для SubComponent значения null или false получит желаемые результаты

class Table extends React.Component {
  render() {
    console.log("props:", this.props);
    return (
      <div>
        <ReactTable
          data={this.props.data}
          columns={this.props.columns}
          showPagination={false}
          defaultPageSize={this.props.data.length}
          resizable={false}
          SubComponent={
            this.props.expand
              ? row => (
                  <div>
                    <h1>expanded state</h1>
                  </div>
                )
              : false
          }
        />
      </div>
    );
  }
}

Спасибо, я попытался использовать ваш код, но этот образец не работает без expandChanged в родительском элементе коды. Я думаю, что оставлю этот вопрос открытым и создам новую проблему. Спасибо

Matt 31.10.2018 14:28

@Matt Вы не можете установить для свойства SubComponent значение undefined, вы можете установить его в false или null : false вместо : undefined в песочнице

HMR 31.10.2018 14:38

@Matt Создал для этого проблема, так как установка для свойства undefined не должна приводить к тому, что этот атрибут будет торчать. Обнаружено, где эта ошибка была вызвана в их коде, но не уверен, как / если разработчики «исправят» ее.

HMR 31.10.2018 15:30

Другие вопросы по теме