Redux拉取数据实现MUI DataTables分页失效问题求助（React+Laravel）

问题定位 #

排查到你代码里存在3个核心问题：

• 语法错误：props.carlists.(page=${pages}&per_page=${rowsPerPages}); 存在冗余的点运算符，且你混淆了Redux存储数据和请求方法的定位：props.carlists是你存在Redux store中的列表数据，不是请求调用函数，不能直接加括号传参调用
• 逻辑流程错误：你直接复用了原生fetch的.then()逻辑处理Redux调用，Redux异步请求的响应处理应该放在thunk/saga等异步中间件中，最终把返回的列表数据、总条数更新到store，组件直接从props取更新后的数据即可，无需在组件内手动处理请求响应
• 触发逻辑缺失：useEffect依赖项为空数组，只会在组件首次挂载时执行一次拉取，切换页码、修改每页行数时不会触发重新拉取数据；同时你代码里的changePage、changeRow方法没有更新组件内的page、rowsPerPage状态，也没有关联数据拉取逻辑

修复方案 #

步骤1：补充Redux异步逻辑 #

先定义异步action（以Redux Thunk为例），在action中发起请求并更新store：

// 定义action type
const FETCH_CAR_LISTS_SUCCESS = 'FETCH_CAR_LISTS_SUCCESS';
// 异步action
export const fetchCarLists = (page, perPage) => async dispatch => {
  const res = await fetch(`./indexListCar?page=${page}&per_page=${perPage}`);
  const resJson = await res.json();
  dispatch({
    type: FETCH_CAR_LISTS_SUCCESS,
    payload: {
      data: resJson.data,
      total: resJson.total
    }
  })
}
// reducer里处理state更新
const initialState = {
  carlists: [],
  total: 0,
  loading: false
}
const carReducer = (state = initialState, action) => {
  switch(action.type) {
    case FETCH_CAR_LISTS_SUCCESS:
      return {
        ...state,
        carlists: action.payload.data,
        total: action.payload.total,
        loading: false
      }
    // 其他action处理省略
    default:
      return state
  }
}

步骤2：修正组件内逻辑 #

把请求触发、状态更新都和Redux关联，修正后的组件代码如下：

// 把fetchCarLists映射到props，这里可以用mapDispatchToProps或者useDispatch hook
const loadData = (pages, rowsPerPages) => {
  setIsLoading(true)
  // 触发异步拉取action
  props.fetchCarLists(pages, rowsPerPages)
}

// 依赖项加入page、rowsPerPage，值变化时自动拉新
useEffect(() => {
  loadData(page, rowsPerPage)
}, [page, rowsPerPage])

// 分页/每页行数变化时更新对应状态，触发useEffect重新拉取
const changePage = (newPage, newRowsPerPage) => {
  setPage(newPage)
  setRowsPerPage(newRowsPerPage)
}
const changeRow = (newPage, newRowsPerPage) => {
  setPage(newPage)
  setRowsPerPage(newRowsPerPage)
}

const options = {
  filter: true,
  selectableRows: 'none',
  filterType: 'dropdown',
  responsive: 'vertical',
  rowsPerPage: 100,
  elevation: 0,
  onChangeRowsPerPage: false,
  setTableProps: () => {
      return {
          padding: '5px 3px 5px 10px',
          size: 'small'
      };
  },
  onRowSelectionChange: (i, t) => {
    console.log(i)
  },
  onTableChange: (action, tableState) => {
    switch (action) {
      case 'changePage':
        changePage(tableState.page, tableState.rowsPerPage);
        break;
      case 'sort':
        break;
      case 'changeRowsPerPage':
        changeRow(tableState.page, tableState.rowsPerPage)
        break;
      default:
    }
  }
};

// 渲染表格时直接用props.carlists作为数据源，用props.total作为总条数

内容的提问来源于stack exchange，提问作者ivancracker