React router + redux 导航回来不会调用 componentWillMount

2024-05-27

目前,我在容器组件的生命周期方法 componentWillMount 中预加载来自 api 的数据:

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

当用户导航到路线时调用它/:dept/:course,并且它工作正常,直到您从以下位置导航:/mif/31 to /mif/33然后按返回按钮。该组件实际上并未重新初始化,因此不会调用生命周期方法,并且不会重新加载数据。

在这种情况下有某种方法可以重新加载数据吗?我应该使用另一种预加载数据的方法吗?我看到反应路由器发出LOCATION_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);
  };
}

你需要使用componentWillReceiveProps检查是否有新的道具(nextProps) 与现有的 props 相同 (this.props)。 Redux 示例中的相关代码如下:https://github.com/reactjs/redux/blob/e5e608eb87f84d4c6ec22b3b4e59338d234904d5/examples/async/src/containers/App.js#L13-L18 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))
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React router + redux 导航回来不会调用 componentWillMount 的相关文章

  • 以编程方式填写reactjs表单

    我正在编写一个用户脚本 但无法填写由reactjs制作的表单 我的代码 document querySelector id username value email protected cdn cgi l email protection
  • 如何针对 Node.js 中发生的每个错误发送电子邮件?

    假设我的 node js 应用程序正在运行 如果出现错误 我的意思是所有错误 不仅仅是网络错误 如果出现错误 则很重要 我如何调用函数向我发送电子邮件 基本上 在我希望它写入 err out 之前 我希望向我发送一封电子邮件 我正在使用no
  • 可以在初始 DOM 解析期间/之前修改 DOM 吗?

    是否可以在初始 DOM 解析期间或之前修改 DOM 或者我是否必须等到 DOM 被解析和构建之后才能与其交互 更具体地说 是否有可能阻止 DOM 中的脚本元素使用用户脚本 内容脚本或 Chrome 或 Firefox 中的类似脚本运行 在解
  • 在打字稿中导入 json

    我是 typescript 的新手 在我的项目中 我们使用 typescript2 在我的要求之一中 我需要导入 json 文件 所以我创建了 d ts 文件如下 test d ts declare module json const va
  • 防止 iOS 键盘在 cordova 3.5 中滚动页面

    我正在使用 Cordova 3 5 和 jQuery mobile 构建 iOS 应用程序 我在大部分应用程序中禁用了滚动功能 但是 当我选择输入字段时 iOS 键盘会打开并向上滚动页面 我不想要这个功能 由于输入足够高 键盘不会覆盖它 我
  • 设置 cookie 时中断 JavaScript 执行

    当设置 cookie 时 是否可以始终中断浏览器开发人员工具中的 javascript 执行 无需显式设置 JS 断点 document cookie 在 html head 块的开头添加此代码片段效果很好
  • 如何制作没有 ng-repeat 的模板并使用 Angular-drag-and-drop-lists 将数据传递到 $scope?

    我想用角度拖放列表 https github com marceljuenemann angular drag and drop lists使用我自己的网格模板到所见即所得编辑器 如何构建我自己的 HTML 模板而不需要ng repeat因
  • window.location 和 location.href 之间的区别

    我对之间的区别感到困惑window location and location href 两者似乎都以相同的方式行事 有什么不同 window location是一个对象 它保存有关当前文档位置的所有信息 主机 href 端口 协议等 lo
  • 将 UMD Javascript 模块导入浏览器

    你好 我正在对 RxJS 进行一些研究 我可以通过在浏览器中引用它来使用该库 如下所示 它使用全局对象命名空间变量 Rx 导入 我可以制作可观察的东西并做所有有趣的事情 当我将 src 更改为指向最新的 UMD 文件时 一切都会崩溃 如下所
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 在 ReactJS 中创建动态目录

    我有一个组件 它代表一个页面 其中有多个SectionHeader 组件作为该页面的子组件 我想通过检查 Page 的子项 SectionHeaders 来动态创建目录
  • 使用 Vue 的多模式组件

    我在 Vue 中实现动态模式组件时遇到问题 A common approach I follow to display a set of data fetched from the db is I dump each of the rows
  • 如何渲染变量(或 prop)内部的 jsx/html?

    const Footer gt let a b Hey b return div Some bold text a div 这只会呈现为Some bold text b Hey b 如何将粗体文本渲染为粗体 变量内容是我自己的 所以我不必担
  • 在 JavaScript 循环之外声明变量可以提高速度和内存?

    C 也有类似的问题 但我们没有看到 JavaScript 的任何问题 在循环内声明变量是否可以接受 假设循环有 200 次迭代 使用样本 2 相对于样本 1 是否有性能要求 内存和速度 我们使用 jQuery 来循环 它提高了我们将 var
  • 在 Shopify 商店中嵌入 Vue 组件

    在产品页面中 我尝试显示自定义 Vue 组件 为简洁起见 该组件根据给定的产品 ID 显示 Firebase 数据库中的一些信息 我最初尝试将其制作为 Shopify 应用程序 以便我可以访问他们的 API 我实现了 OAuth 并且可以检
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • Javascript Replace() 和 $1 问题

    我正在尝试创建一个脚本来搜索文本中的模式并在它找到的字符串周围包裹一个标签 shop attributes td each function this html function i html return html replace E 0
  • JavaScript 相对路径

    在第一个 html 文件中 我使用了一个变量类别链接 var categoryLinks Career prospects http localhost Landa DirectManagers 511 HelenaChechik Dim0
  • Jquery - 选择选项后如何获取选项的特定数据类型?

    我将直接跳到标记 然后解释我想要做什么 HTML 选择选项
  • Cypress 在 Create React App 中返回 .scss 文件的 webpack 编译错误

    我正在尝试将 Cypress 添加到非常基本的 CRA 但遇到了 Cypress 无法理解 scss 文件的问题 当我跑步时npm run cypress运行测试 我收到以下错误 Error Webpack Compilation Erro

随机推荐

  • 有没有适用于 IE 的 websocket 插件?

    有没有适用于 IE 的插件 我可以在 IE 7 8 9 中使用 Websockets 我还没找到 socket io 使用的后备方案之一是 flash gimite web socket js https github com gimite
  • 在 Roslyn 分析器中检查表达式类型的正确方法?

    我正在用 Roslyn 编写一个代码分析器 我需要检查是否ExpressionSyntax属于类型Task or Task
  • 在python中发送多个文件

    我是 python 新手 我正在尝试以下操作 我有两个 calsess Server py and Client py我想将服务器目录中存在的所有文件发送到客户端的某个目录 IE C ServerDir file1 txt C Server
  • 如何通过VBA代码修复仅在Excel共享模式下发生的运行时错误400

    我真的不知道400错误是什么原因造成的 下面的代码在正常模式下运行得很好 但是一旦我在共享模式下启用 Excel 并尝试使用用户表单 它就会给我 VBA 400 我在这里尝试做的是在向用户显示用户表单后更改形状的文本并禁用其 OnActio
  • Spark如何选择节点来运行执行器?(spark on YARN)

    Spark如何选择节点来运行执行器 spark on YARN 我们使用 Spark on Yarn 模式 集群有 120 个节点 昨天 一个 Spark 作业创建了 200 个执行程序 而节点 1 上有 11 个执行程序 Node2上有1
  • 在java流api中指定Collector初始容量的一种优雅方法

    我试图找到一种在java流api中设置收集器初始容量的好方法 最简单的例子是 data stream collect Collectors toList 我只想将一个具有列表大小的 int 传递到收集器中 以免调整内部数组的大小 第一个意图
  • gcc 的 std::bind 在源代码中的哪个位置将参数复制到数据结构中?

    在试图了解在什么情况下std bind分配内存 我看了这个答案 https stackoverflow com a 25403584 391161 这给出了一些直觉 但我想要更详细的理解 所以我去查看了源代码gcc 我正在检查以下源代码 h
  • 如何在 Android 中恢复我的音频?

    我必须实现用于创建具有暂停和恢复状态的音频的应用程序 当我的应用程序作为启动时音频启动 当我按下模拟器上的后退按钮时 音频音乐处于暂停状态 但是当我的活动回来时从停止状态到前台我的音频音乐未恢复 这是我的代码 public class Au
  • 我如何知道是否启用了 PHP 缓存?

    我曾经认为缓存很难安装 所以我从来没有这样做过 在阅读了有关 APC 的内容后 它似乎很容易安装 我一直认为我必须修改应用程序中的大量 PHP 代码才能使用它 哈哈 不管怎样 我想安装APC 我可以使用 phpinfo 并注意到它没有在页面
  • 使用 CXF 通过 HTTP 基本身份验证使用 Web 服务时出现 401 错误

    我正在尝试在 JUnit 测试中使用使用 HTTP 基本身份验证 使用 Apache CXF 的远程 Web 服务 我收到的错误是 javax xml ws WebServiceException Failed to access the
  • 获取添加为子视图的 UIView 的可见矩形

    如上图所示 UIView A 和 UIView C 添加到 UIView B 上 B ClipToBounds 为 YES 因此红色区域不可见 是否有可能获得 A 和 C 的可见矩形 用线条显示 当我触摸视图 A 时 我需要在可见区域显示矩
  • 逐行读取 JTextPane

    有没有办法读取a的内容JTextPane逐行 很像 BufferedReader 吗 Element root textPane getDocument getDefaultRootElement 获得根元素后 您可以检查存在多少个子元素
  • 当我编写 FirebaseApp.configure() 时,iOS 应用程序崩溃

    我有一个 ios 应用程序 可以正常登录和 Facebook 登录 今天我集成了 firebase 当我在应用程序委托中编写 FirebaseApp configure 时 我的应用程序崩溃了 并且此函数突出显示错误代码 在展开可选值时意外
  • 如何从 QLineEdit 动态获取文本? [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 怎样才能得到String Text from QlineEdit 我尝试过像这样 myArea getList 功能是获取字符串值并使用字符
  • 如何在perl中使用O_ASYNC和fcntl?

    我想使用 O ASYNC 选项 当管道可以读取时 SIGIO 的处理程序将运行 但以下代码不起作用 任何人都可以帮助我吗 bin env perl use Fcntl SIG IO sub print catch SIGIO n my fl
  • 窗口多维 Tensorflow 数据集

    我有形状的二维数据m by n我想要的窗口大小w沿着第一个轴进入数据集m w许多二维数组 每个数组的大小w by n 例如如果数据是 0 1 2 3 4 5 6 7 8 9 10 11 然后我想将其窗口化 0 1 2 3 4 5 6 7 8
  • 如何在头文件中定义变量? [复制]

    这个问题在这里已经有答案了 如果这个问题没有意义或者看起来很简单 但我想了解这些头文件是如何工作的 请原谅我 是否可以在头文件内部声明 int 等类型的变量 我有以下代码 我声明窗口和窗口尺寸的行有问题 编译器说它们有多个定义 首先在主文件
  • 如何向 OkHttp 请求拦截器添加标头?

    我将这个拦截器添加到我的 OkHttp 客户端 public class RequestTokenInterceptor implements Interceptor Override public Response intercept C
  • 为表多次指定了 xxx 列

    我正在尝试将 db2 简单查询调整为 SQL SERVER 该查询在 db2 上运行良好 select from pb console users u join select from pb console users user role
  • React router + redux 导航回来不会调用 componentWillMount

    目前 我在容器组件的生命周期方法 componentWillMount 中预加载来自 api 的数据 componentWillMount const dept course this props routeParams this prop