React 路由器 + redux 导航回不调用 componentWillMount

IT技术 javascript reactjs redux react-router react-router-redux
2021-05-09 23:13:22

目前我在容器组件的生命周期方法 componentWillMount 中从 api 预加载数据：

componentWillMount() {
  const { dept, course } = this.props.routeParams;
  this.props.fetchTimetable(dept, course);
}

当用户导航到 route 时会调用它/:dept/:course，并且它工作正常，直到您导航到例如：/mif/31到/mif/33然后按后退按钮。该组件实际上并未重新初始化，因此不会调用生命周期方法，也不会重新加载数据。

在这种情况下，是否有某种方法可以重新加载数据？我应该使用另一种预加载数据的方法吗？我看到 react routerLOCATION_CHANGE在任何位置更改时都会发出事件，包括导航回来，所以也许我可以以某种方式使用它？

如果重要的话，这是我实现数据加载的方式：

import { getTimetable } from '../api/timetable';

export const REQUEST_TIMETABLE = 'REQUEST_TIMETABLE';
export const RECEIVE_TIMETABLE = 'RECEIVE_TIMETABLE';

const requestTimetable = () => ({ type: REQUEST_TIMETABLE, loading: true });
const receiveTimetable = (timetable) => ({ type: RECEIVE_TIMETABLE, loading: false, timetable });

export function fetchTimetable(departmentId, courseId) {
  return dispatch => {
    dispatch(requestTimetable());
    getTimetable(departmentId, courseId)
      .then(timetable => dispatch(receiveTimetable(timetable)))
      .catch(console.log);
  };
}
2个回答

您需要使用componentWillReceiveProps来检查新props ( nextProps) 是否与现有props ( this.props)相同。以下是 Redux 示例中的相关代码：https : //github.com/reactjs/redux/blob/e5e608eb87f84d4c6ec22b3b4e59338d234904d5/examples/async/src/containers/App.js#L13-L18

componentWillReceiveProps(nextProps) {
  if (nextProps.dept !== this.props.dept || nextProps.course !== this.props.course) {
    dispatch(fetchTimetable(nextProps.dept, nextProps.course))
  }
}

我在这里可能错了，但我相信您正在寻找的功能不是 componentWillMount 而是 componentWillReceiveProps，

假设您将变量（如 :courseId）从 redux 路由器传递到您的组件，则在 componentWillReceiveProps 中使用 setState 应该重新绘制您的组件。

否则，您可以订阅商店中的更改：http : //redux.js.org/docs/api/Store.html

免责声明：我对 redux 的了解可能比你少。

其它你可能感兴趣的问题
上一篇如何在react虚拟化（CodeSandBox）中向表格添加水平滚动条 下一篇在 final-form-arrays 中为数组提供初始值会导致状态更改重置整个表单，我该如何防止这种情况？