Заставьте getDerivedStateFromProps вести себя как componentDidMount при обновлении реквизита - PullRequest
Новая
       39

Заставьте getDerivedStateFromProps вести себя как componentDidMount при обновлении реквизита

0 голосов
/ 02 января 2019

У меня есть компоненты React parent-children, которые общаются через реквизиты, а потомки обновляются с помощью функции отправки.

Родительский класс: 

   handleSubmit = () => {
    this.setState({
      items: Items // imported from dummy data
    })
  }

  // truncated (inside render function, state destructuring, etc)

    <Form submit={this.handleSubmit} />
      <Table 
      data={items}
      currentCards={currentCards}
      currentPage={currentPage}
      totalPages={totalPages}
      />

Детский класс: 

// truncated (class Table, props constructor, set state from props)

   static getDerivedStateFromProps(props, state) {
    if (props.data !== state.data) {
      return {
        data: props.data
        };
      }
      return null;
    }

// truncated (inside render function, state destructuring, etc)

    <Pagination
      totalRecords={totalCards}
      pageLimit={10}
      pageNeighbours={1}
      onPageChanged={onPageChanged}
    />

      <tbody>
        {currentCards.map((item, key) => (
          <tr key={key || "0"}>
// truncated

Pagination's onPageChanged запускается при первой загрузке с items, все еще пустым, но не при нажатии handleSubmit (что вызывает getDerivedStateFromProps для обработки элементов / данных для заполнения currentCards).

Я подтверждаю, что onPageChanged разбиения на страницы не инициируется при getDerivedStateFromProps, потому что я установил точку останова внутри Pagination и data внутри детских render, уже обновленных при отправке (но не currentCards, поскольку для этого требуется onPageChanged должен быть начат первым)

ах, и мой Pagination код также основан на этом

Короче говоря, как пересчитать нумерацию страниц при получении данных с помощью handleSubmit?

Обновление:

Вот CodeSandbox из того, что я пытаюсь сделать , если вы нажмете "Отправить", Pagination не перемонтируется

...