javascript - 使 getDerivedStateFromProps 在 props 更新时表现得像 componentDidMount

Question

我有通过 props 进行通信的 React 父子组件，并且子组件使用提交功能进行更新。

父类：

   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

分页onPageChanged在第一次加载时启动，items仍然为空，但不是在 handleSubmit按下时（触发getDerivedStateFromProps处理项目/数据以填充currentCards）。

onPageChanged我确认没有启动分页，因为我在孩子的内部和内部getDerivedStateFromProps设置了一个断点，在提交时已经更新（但不是因为它需要首先启动）PaginationdatarendercurrentCardsonPageChanged

啊，我的Pagination代码也是基于这个

简而言之，当使用 检索数据时如何重新计算分页handleSubmit？

更新：

这是我正在尝试做的 CodeSandbox，如果您单击提交，Pagination则不会重新安装

标签： javascriptreactjsecmascript-6react-propsreact-component