在React中使用Redux Saga时，会出现此错误。未捕获的TypeError: getPosts不是函数 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

Taro 小程序开发大型实战（七）：尝鲜微信小程序云（下篇）

我们首先来看一看最终的完成效果：如果你不熟悉 Redux，推荐阅读我们的《Redux 包教包会》系列教程： Redux 包教包会（一）：解救 React 状态危机[7] Redux 包教包会（二）：趁热打铁...然后，跟着取数据的是一个 try/catch 语句块，用于捕获错误，在 try 语句块中，我们使用 db 的查询操作：db.collection('user').doc(userId).get()，表示查询...在 try 语句中，首先是使用了 redux-saga 提供给我们的 effects helper 函数：call 来调用登录的 API：postApi. getPosts。...接着就是 main 函数体，里面是一个 try/catch 语句块，用于捕获错误，在 try 语句块中，我们使用 db 的查询操作：db.collection('post').get()，表示查询所有的...接着就是 main 函数体，里面是一个 try/catch 语句块，用于捕获错误，在 try 语句块中，我们首先从 event 对象里面获取到了 postId，接着我们使用 db 的查询操作：db.collection

3.1K1 0

前端高频react面试题

那为什么不要在循环、条件或嵌套函数中调用 Hook 呢？因为 Hooks 的设计是基于数组实现。在调用时按顺序加入数组中，如果使用循环、条件或嵌套函数很有可能导致数组取值错位，执行错误的 Hook。...在React中组件的props改变时更新组件的有哪些方法？...这个问题就设计到了数据持久化，主要的实现方式有以下几种：Redux：将页面的数据存储在redux中，在重新加载页面时，获取Redux中的数据；data.js：使用webpack构建的项目，可以建一个文件...action时，该action的函数体会自动执行 store.dispatch(action)}（2）使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...在使用 React Router时，如何获取当前页面的路由或浏览器中地址栏中的地址？

4.6K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

前端react面试题（必备）2

其实 React 本身并不强制使用 JSX。在没有 JSX 的时候，React 实现一个组件依赖于使用 React.createElement 函数。...但是在⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助redux的异步中间件进⾏异步处理。...action时，该action的函数体会自动执行 store.dispatch(action)}（2）使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...可以捕获action，然后执行一个函数，那么可以把异步代码放在这个函数中，使用步骤如下：配置中间件import {createStore, applyMiddleware, compose} from...受控组件是 React 控制中的组件，并且是表单数据真实的唯一来源。非受控组件是由 DOM 处理表单数据的地方，而不是在 React 组件中。

3.2K2 0

高级前端react面试题总结

，条件或嵌套函数中调用Hook，必须始终在 React函数的顶层使用Hook这是因为React需要利用调用顺序来正确更新相应的状态，以及调用相应的钩子函数。...React V15 在渲染时，会递归比对 VirtualDOM 树，找出需要变动的节点，然后同步更新它们，一气呵成。...但是在⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助redux的异步中间件进⾏异步处理。...action时，该action的函数体会自动执行 store.dispatch(action)}（2）使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...可以捕获action，然后执行一个函数，那么可以把异步代码放在这个函数中，使用步骤如下：配置中间件import {createStore, applyMiddleware, compose} from

5.5K4 0

社招前端一面react面试题汇总

(在构造函数中)调用 super(props) 的目的是什么在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()...调用 setState 时，组件的 state 并不会立即改变， setState 只是把要修改的 state 放入一个队列， React 会优化真正的执行时机，并出于性能原因，会将 React 事件处理程序中的多次...即：Hooks 组件（使用了Hooks的函数组件）有生命周期，而函数组件（未使用Hooks的函数组件）是没有生命周期的。.../catch语法直接捕获处理；功能强⼤：redux-saga提供了⼤量的Saga辅助函数和Effect创建器供开发者使⽤，开发者⽆须封装或者简单封装即可使⽤；灵活：redux-saga可以将多个Saga...一般情况下，只有在不支持 HTML5 history API 的浏览器中使用此功能；getUserConfirmation 用于确认导航的函数，默认使用 window.confirm。

4.1K2 0

百度前端高频react面试题（持续更新中）_2023-02-27

而不是为每个状态更新编写一个事件处理程序。 React官方的解释：要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以使用 ref来从 DOM 节点中获取表单数据。...但是在⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助redux的异步中间件进⾏异步处理。...action时，该action的函数体会自动执行 store.dispatch(action) } （2）使用redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独...)，⽽不是充满 “⿊魔法” thunk function 异常处理: 受益于 generator function 的 saga 实现，代码异常/请求失败都可以直接通过 try/catch 语法直接捕获处理...，其中defaultProps是使用getDefaultProps的方法来获取默认组件属性的 React.Component在创建组件时配置这两个对应信息时，他们是作为组件类的属性，不是组件实例的属性，

3.2K3 0

高频React面试题及详解

为什么选择使用框架而不是原生? 框架的好处: 组件化: 其中以 React 的组件化最为彻底,甚至可以到函数级别的原子组件,高度的组件化可以是我们的工程易于维护、易于组合拓展。...而且在componentWillMount请求会有一系列潜在的问题,首先,在服务器渲染时,如果在 componentWillMount 里获取数据，fetch data会执行两次，一次在服务端一次在客户端...setState 的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形成了所谓的“异步...时间分片 React 在渲染（render）的时候，不会阻塞现在的线程如果你的设备足够快，你会感觉渲染是同步的如果你设备非常慢，你会感觉还算是灵敏的虽然是异步渲染，但是你将会看到完整的渲染，而不是一个组件一行行的渲染出来...function 的 saga 实现，代码异常/请求失败都可以直接通过 try/catch 语法直接捕获处理功能强大: redux-saga提供了大量的Saga 辅助函数和Effect 创建器供开发者使用

3.4K4 0

2022社招react面试题附答案

受控组件是React控制中的组件，并且是表单数据真实的唯一来源。非受控组件是由DOM处理表单数据的地方，而不是在 React 组件中。...尽管非受控组件通常更易于实现，因为只需使用refs即可从DOM中获取值，但通常建议优先选择受控制的组件，而不是非受控制的组件。...通过使用React Profiler，可以在使用这些方法前后对性能进行测量，从而确保通过进行给定的更改来实际改进性能。 8、讲下redux的⼯作流程？...相对来说⽐较简单，在其中有很多的抽象，mobx更多的使⽤⾯向对象的编程思维；redux会⽐较复杂，因为其中的函数式编程思想掌握起来不是那么容易，同时需要借助⼀系列的中间件来处理异步和副作⽤ mobx中有更多的抽象和封装...try/catch语法直接捕获处理；功能强⼤：redux-saga提供了⼤量的Saga辅助函数和Effect创建器供开发者使⽤，开发者⽆须封装或者简单封装即可使⽤；灵活：redux-saga可以将多个

2.9K1 0

2021高频前端面试题汇总之React篇

在React中，当prop或者state发生变化时，可以通过在shouldComponentUpdate生命周期函数中执行return false来阻止页面的更新，从而减少不必要的render执行。...但是在⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助redux的异步中间件进⾏异步处理。...action时，该action的函数体会自动执行 store.dispatch(action) } 复制代码（2）使用redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独...通过上面的区别，我们不能说谁好谁坏，它们各有自己的优势。在 React-Hooks 出现之前，类组件的能力边界明显强于函数组件。...这就给函数组件的使用带来了非常多的局限性，导致我们并不能使用函数这种形式，写出一个真正的全功能的组件。而React-Hooks 的出现，就是为了帮助函数组件补齐这些（相对于类组件来说）缺失的能力。

2.6K0 0

前端二面高频react面试题集锦_2023-02-23

在传统页面的开发模式中，每次需要更新页面时，都要手动操作 DOM 来进行更新。 DOM 操作非常昂贵。在前端开发中，性能消耗最大的就是 DOM 操作，而且这部分代码会让整体项目的代码变得难以维护。...使用箭头函数(arrow functions)的优点是什么作用域安全：在箭头函数之前，每一个新创建的函数都有定义自身的 this 值(在构造函数中是新对象；在严格模式下，函数调用中的 this 是未定义的...但是在⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助redux的异步中间件进⾏异步处理。...action时，该action的函数体会自动执行 store.dispatch(action) } （2）使用redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独...)，⽽不是充满 “⿊魔法” thunk function 异常处理: 受益于 generator function 的 saga 实现，代码异常/请求失败都可以直接通过 try/catch 语法直接捕获处理

3.5K2 0

百度前端必会react面试题汇总

（1）不要在循环，条件或嵌套函数中调用Hook，必须始终在 React函数的顶层使用Hook这是因为React需要利用调用顺序来正确更新相应的状态，以及调用相应的钩子函数。...这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。...一般情况下，只有在不支持 HTML5 history API 的浏览器中使用此功能；getUserConfirmation 用于确认导航的函数，默认使用 window.confirm。...再对高阶组件进行一个小小的总结：高阶组件不是组件，是一个把某个组件转换成另一个组件的函数高阶组件的主要作用是代码复用高阶组件是装饰器模式在 React 中的实现封装组件的原则封装原则1、单一原则.../catch语法直接捕获处理；功能强⼤：redux-saga提供了⼤量的Saga辅助函数和Effect创建器供开发者使⽤，开发者⽆须封装或者简单封装即可使⽤；灵活：redux-saga可以将多个Saga

2.2K1 0

字节前端必会react面试题1

)};在集合中添加和删除项目时，不使用键或将索引用作键会导致奇怪的行为。...一般情况下，只有在不支持 HTML5 history API 的浏览器中使用此功能；getUserConfirmation 用于确认导航的函数，默认使用 window.confirm。..., 为了性能等考虑, 尽量在constructor中绑定事件使用箭头函数(arrow functions)的优点是什么作用域安全：在箭头函数之前，每一个新创建的函数都有定义自身的 this 值(在构造函数中是新对象...但是在⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助redux的异步中间件进⾏异步处理。...action时，该action的函数体会自动执行 store.dispatch(action)}（2）使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js

3.9K2 0

一天梳理完react面试题

尽管 React 使用高度优化的 Diff 算法，但是这个过程仍然会损耗性能.在React中组件的this.state和setState有什么区别？...但是在⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助redux的异步中间件进⾏异步处理。...action时，该action的函数体会自动执行 store.dispatch(action)}（2）使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...通过上面的区别，我们不能说谁好谁坏，它们各有自己的优势。在 React-Hooks 出现之前，类组件的能力边界明显强于函数组件。...这就给函数组件的使用带来了非常多的局限性，导致我们并不能使用函数这种形式，写出一个真正的全功能的组件。而React-Hooks 的出现，就是为了帮助函数组件补齐这些（相对于类组件来说）缺失的能力。

6.4K3 0

dva

依赖关系 dva react react-dom dva-core redux redux-saga history react-redux react-router-redux...的fork -> watcher -> worker，并做好错误捕获）除了core里最重要的两部分外，dva还做了一些事情：内置react-router-redux, history负责路由管理粘上...（onHmr与extraReducers是后来面向特定需要的增强）不过话说回来，dva-core实际做的只把redux和redux-saga通过model配置整合起来，并增强一些控制（错误处理等），引入的唯一外来概念是...） invariant无差别throw可以用，但warning不建议使用，因为含warning的release代码不如编译替换干净（还会执行空函数）另一个技巧是包一层函数，在外面做参数检查，比如示例中的...把自己交给hook，不是什么了不起的技巧，但用法上很有意思，利用iterator可展开的特性，实现了装饰者的效果（交出去一个saga，拿回来一个增强过的saga，类型没变不影响流程）

2.2K5 0

一天梳理完react面试高频题

在传统页面的开发模式中，每次需要更新页面时，都要手动操作 DOM 来进行更新。 DOM 操作非常昂贵。在前端开发中，性能消耗最大的就是 DOM 操作，而且这部分代码会让整体项目的代码变得难以维护。...但是在⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助redux的异步中间件进⾏异步处理。...action时，该action的函数体会自动执行 store.dispatch(action)}（2）使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...可以捕获action，然后执行一个函数，那么可以把异步代码放在这个函数中，使用步骤如下：配置中间件import {createStore, applyMiddleware, compose} from...得倒新的虚拟DOM树后，会计算出新老树的节点差异，会根据差异对界面进行最小化渲染按需更新在差异话计算中，react可以相对准确的知道哪些位置发生了改变以及该如何改变，这保证按需更新，而不是宣布重新渲染

5.5K2 0

redux-saga

/iterator实现是因为它非常适合流程控制的场景，体现在： yield让描述串行/并行的异步操作变得很优雅以同步形式获取异步操作结果，更符合顺序执行的直觉以同步形式捕获异步错误，优雅地捕获异步错误...saga 效果相当于让指定task独立在顶层执行，与middleware.run(rootSaga)类似通过fork执行的task与当前saga有关 fork所在的saga会等待forked task...，只有在所有forked task都执行结束后，当前saga才会结束 fork的执行机制与all完全一致，包括cancel和error的传递方式，所以如果任一task有未捕获的error，当前saga也会结束...里所说的Saga大多数情况下指的都是generator形式的一组操作，而不是指redux-saga自身。...从异步流程控制到并发控制应有尽有完备的错误捕获机制，阻塞型错误可try-catch，非阻塞型会通知所属Saga 优雅的流程控制，可读性/精炼程度不比async&await差多少，很容易描述并行操作缺点

2.4K4 1

2021高频前端面试题汇总之React篇

React V15 在渲染时，会递归比对 VirtualDOM 树，找出需要变动的节点，然后同步更新它们，一气呵成。...（5）Mixins React.createClass：使用 React.createClass 的话，可以在创建组件时添加一个叫做 mixins 的属性，并将可供混合的类的集合以数组的形式赋给 mixins...但是在⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助redux的异步中间件进⾏异步处理。...action时，该action的函数体会自动执行 store.dispatch(action) } 复制代码（2）使用redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独...可以捕获action，然后执行一个函数，那么可以把异步代码放在这个函数中，使用步骤如下：配置中间件 import {createStore, applyMiddleware, compose} from

2.8K0 0

2022社招React面试题附答案

React V15 在渲染时，会递归比对 VirtualDOM 树，找出需要变动的节点，然后同步更新它们，一气呵成。...（5）Mixins React.createClass：使用 React.createClass 的话，可以在创建组件时添加一个叫做 mixins 的属性，并将可供混合的类的集合以数组的形式赋给 mixins...但是在⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助redux的异步中间件进⾏异步处理。...action时，该action的函数体会自动执行 store.dispatch(action)}复制代码（2）使用redux-saga中间件 redux-saga优点: 异步解耦: 异步操作被被转移到单独...可以捕获action，然后执行一个函数，那么可以把异步代码放在这个函数中，使用步骤如下：配置中间件 import {createStore, applyMiddleware, compose} from

2.8K5 0

redux-saga入门

saga中yield 后面的内容我们称呼它为Effect(redux-saga的任务单元)，在Effects中我们可以进行启动其它saga，也可以处理一些副作用操作。...如果返回结果不是迭代器对象，则中间件会立即把该值交给call所在的saga，从而让saga可以以同步的形式恢复执行。...一个task就想一个在后台运行的进程，在redux-saga应用程序中，可以运行多个task，task可通过fork函数创建。...其中如果期望在这些fork任务被取消时执行一些取消逻辑可以将这些取消逻辑放在finally区块中。任务被取消后，依然会执行finally中的代码。...如果参数中某个任务失败且该任务未对错误进行处理，那么错误将冒泡到all所在的Generator中，且取消其他任务。如果错误被catch处理，那么依然视为完成。不会取消其它任务。

1.8K2 0

美团前端react面试题汇总

但是在⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助redux的异步中间件进⾏异步处理。...action时，该action的函数体会自动执行 store.dispatch(action)}（2）使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js...可以捕获action，然后执行一个函数，那么可以把异步代码放在这个函数中，使用步骤如下：配置中间件import {createStore, applyMiddleware, compose} from...再对高阶组件进行一个小小的总结：高阶组件不是组件，是一个把某个组件转换成另一个组件的函数高阶组件的主要作用是代码复用高阶组件是装饰器模式在 React 中的实现封装组件的原则封装原则1、单一原则...但在 React 中会有些不同，包含表单元素的组件将会在 state 中追踪输入的值，并且每次调用回调函数时，如 onChange 会更新 state，重新渲染组件。

6.2K3 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭