Question

我正在尝试在模型中进行页面分页。我使用了@ material-ui TablePagination。事情是，我正在使用Web服务加载我的数据，并且我不想将所有数据存储在页面内，所以我在使用提供的API分页（将参数发送到正确页面的url）

现在进入我的代码：

    <TablePagination
          component="div"
          count={props.totalTableRows}
          rowsPerPage={props.rowsPerPage}
          page={props.brokersListPage}
          onChangePage={props.setBrokersListPage}
          rowsPerPageOptions = {[props.rowsPerPage]}
        />

还有setBrokersListPage：

export const setBrokersListPage = (event, page) => {
    return dispatch => {
        dispatch({
          type: actionNames.SET_BROKERSLIST_PAGE,
          page 
        })
        getBrokers(page)
  }
}

此代码无效。我需要使用分派操作来刷新页面的状态，并且我需要getBrokers来使用正确的信息再次调用Web服务。但这只是更新页面状态而不更新数据。

如果我使用这个：

export const setBrokersListPage = (event, page) => {
    return getBrokers(page)
  }

然后页面刷新，但是状态没有改变 tget刷新了。

我如何实现两者？

Answer 1

您必须先进行API调用，然后将该数据传递给存储，然后连接的组件将更新。在您的代码中，我想您不会使用Web服务中的实际数据。

以下是简化示例：

Promise.resolve()
  .then((page) => {
    store.dispatch({
      type: LOADING_BROKERS
    });
    return Api.getbrokers(page);
    //get brokers here
  })
  .then(() => {
    store.dispatch({
      type: LOADED_DATA_BROKERS,
      pageinfo // or whatever
    });
  })

反应如何从商店和道具中调用方法

1 个答案: