(Redux Persist) TypeError: storage.getItem(...).then不是函数 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

前端react面试题总结

为什么调用 setState 而不是直接改变 state？解答如果您尝试直接改变组件的状态，React 将无法得知它需要重新渲染组件。通过使用setState()方法，React 可以更新组件的UI。...当然，它就是redux-persist。redux-persist会将redux的store中的数据缓存到浏览器的localStorage中。...其使用步骤如下：（1）首先要安装redux-persist：npm i redux-persist（2）对于reducer和action的处理不变，只需修改store的生成代码，修改如下：import.../reducers/index'import {persistStore, persistReducer} from 'redux-persist';import storage from 'redux-persist.../redux/store/store'import {PersistGate} from 'redux-persist/lib/integration/react';ReactDOM.render(<Provider

3.4K3 0

美团前端react面试题汇总

再对高阶组件进行一个小小的总结：高阶组件不是组件，是一个把某个组件转换成另一个组件的函数高阶组件的主要作用是代码复用高阶组件是装饰器模式在 React 中的实现封装组件的原则封装原则1、单一原则...当然，它就是redux-persist。redux-persist会将redux的store中的数据缓存到浏览器的localStorage中。...其使用步骤如下：（1）首先要安装redux-persist：npm i redux-persist（2）对于reducer和action的处理不变，只需修改store的生成代码，修改如下：import.../reducers/index'import {persistStore, persistReducer} from 'redux-persist';import storage from 'redux-persist...受控组件更合适，数据驱动是react核心非受控组件不是通过数据控制页面内容

6.2K3 0

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

是的

没有找到

React面试八股文（第一期）

当然，它就是redux-persist。redux-persist会将redux的store中的数据缓存到浏览器的localStorage中。...其使用步骤如下：（1）首先要安装redux-persist：npm i redux-persist（2）对于reducer和action的处理不变，只需修改store的生成代码，修改如下：import.../reducers/index'import {persistStore, persistReducer} from 'redux-persist';import storage from 'redux-persist...它是一个回调函数，当 setState方法执行结束并重新渲染该组件时调用它。在工作中，更好的方式是使用 React组件生命周期之——“存在期”的生命周期方法，而不是依赖这个回调函数。...而不是为每个状态更新编写一个事件处理程序。React官方的解释：要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以使用 ref来从 DOM 节点中获取表单数据。

4.3K3 0

社招前端常见react面试题（必备）_2023-02-26

当然，它就是redux-persist。redux-persist会将redux的store中的数据缓存到浏览器的localStorage中。...其使用步骤如下：（1）首先要安装redux-persist： npm i redux-persist （2）对于reducer和action的处理不变，只需修改store的生成代码，修改如下： import.../reducers/index' import {persistStore, persistReducer} from 'redux-persist'; import storage from 'redux-persist.../redux/store/store' import {PersistGate} from 'redux-persist/lib/integration/react'; ReactDOM.render(...如果我们将 AJAX 请求放到 componentWillMount 函数中，那么显而易见其会被触发多次，自然也就不是好的选择。

2.2K1 0

9. redux如何精简代码

经过2天折腾，终于把API全面切换到GitHub，总结一下经验： redux精简代码使用redux-persist持久化数据 redux如何减少样板代码##### ---- 通过之前的代码不难看出...redux系统里的ActionType、Action、Reducer都有一定的共性，小项目无所谓，这样写更清晰，但是一旦组件以及业务增多，开发效率就不是很高了。...，那么这样的action如何解析呢，这就要使用中间件了，前文说了，redux里都是函数式的，这就可以让我们在传递过程中做处理了，其实可以理解为类似java spring中的AOP，servlet中的拦截器...AsyncStorage，这里为了简化操作，使用第三方组件redux-persist项目地址，代码很简单，修改app/store.js如下： import {autoRehydrate, persistStore...} from 'redux-persist'; ... function configureStore(onComplete: ?

1.4K5 0

2023前端二面react面试题（边面边更）

当然，它就是redux-persist。redux-persist会将redux的store中的数据缓存到浏览器的localStorage中。...其使用步骤如下：（1）首先要安装redux-persist：npm i redux-persist（2）对于reducer和action的处理不变，只需修改store的生成代码，修改如下：import.../reducers/index'import {persistStore, persistReducer} from 'redux-persist';import storage from 'redux-persist.../lib/storage';import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';const persistConfig.../redux/store/store'import {PersistGate} from 'redux-persist/lib/integration/react';ReactDOM.render(<Provider

3.3K5 0

react高频面试题总结（附答案）

当然，它就是redux-persist。redux-persist会将redux的store中的数据缓存到浏览器的localStorage中。...其使用步骤如下：（1）首先要安装redux-persist：npm i redux-persist（2）对于reducer和action的处理不变，只需修改store的生成代码，修改如下：import.../reducers/index'import {persistStore, persistReducer} from 'redux-persist';import storage from 'redux-persist.../lib/storage';import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';const persistConfig.../redux/store/store'import {PersistGate} from 'redux-persist/lib/integration/react';ReactDOM.render(<Provider

3.1K4 0

前端一面必会react面试题（持续更新中）

当然，它就是redux-persist。redux-persist会将redux的store中的数据缓存到浏览器的localStorage中。...其使用步骤如下：（1）首先要安装redux-persist：npm i redux-persist（2）对于reducer和action的处理不变，只需修改store的生成代码，修改如下：import.../reducers/index'import {persistStore, persistReducer} from 'redux-persist';import storage from 'redux-persist.../redux/store/store'import {PersistGate} from 'redux-persist/lib/integration/react';ReactDOM.render(不是常用的写法。React允许对 setState方法传递一个函数，它接收到先前的状态和属性数据并返回一个需要修改的状态对象，正如我们在上面所做的那样。

2.3K2 0

一天梳理完react面试题

而不是为每个状态更新编写一个事件处理程序。React官方的解释：要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以使用 ref来从 DOM 节点中获取表单数据。...当然，它就是redux-persist。redux-persist会将redux的store中的数据缓存到浏览器的localStorage中。...其使用步骤如下：（1）首先要安装redux-persist：npm i redux-persist（2）对于reducer和action的处理不变，只需修改store的生成代码，修改如下：import.../reducers/index'import {persistStore, persistReducer} from 'redux-persist';import storage from 'redux-persist.../redux/store/store'import {PersistGate} from 'redux-persist/lib/integration/react';ReactDOM.render(<Provider

6.4K3 0

放弃Redux吧，转投Zustand吧

Zustand 与其他状态管理库如 Redux 和 MobX 相比有什么优势？...其实可以使用状态管理来管理全局的主题样式，然后再配合zustand的持久化插件persist来实现一键换肤的功能，这样刷新之后也不会丢失状态了 persist持久化的用法 Zustand 的持久化插件是一个强大的功能...如何使用持久化插件要使用 Zustand 的持久化功能，你需要先从 zustand 库中导入 persist 中间件。然后，你可以将这个中间件应用到你的 store 创建函数中。...以下是一个简单的例子，展示了如何使用 persist 中间件来持久化一个 store 中的状态： import create from 'zustand' import { persist } from...已经简单阐述了一下为什么要选zustand而不是继续用redux。

1.6K1 0

『Dva』深入解析 Dva 进阶特性：打造健壮的前端应用

我这里没有报错，如果有小伙伴报错了，错误信息是 TypeError：Cannot read property 'name' of undefined，这个错误是因为在 Model 中定义了初始状态，但是没有在...onError 函数接收两个参数：error 和 dispatch。error 是捕获到的错误对象，dispatch 是用来派发 action 的函数。...在 onError 函数中，我们可以通过 error 对象来获取错误信息，并通过 alert 函数来弹出错误提示框。这样，当应用发生错误时，我们就可以通过 onError 钩子来捕获并处理错误。...这里有一个注意点：不是我的问题，是官方文档的问题，官方文档中说使用中间件的时候需要加上圆括号，这是老版本的 redux-logger 需要加，新版本的不需要加，所以这里不需要加圆括号，新版本会直接将 redux-logger...它的作用比如说我们可以配合 redux-persist，这是一个持久化存储的插件，我们都知道 redux 保存的数据呢，是保存到内存中的，但是如果说，我想把内存中的数据持久化到我们本地这个时候我们该怎么做呢

1.2K3 1

React Native+Redux开发实用教程

、action 重放、自定义UI等功能； redux-thunk：实现action异步的middleware； redux-persist(可选)：支持store本地持久化； redux-observable...selector：这是你自己编写的一个函数。这个函数声明了你的组件需要整个 store 中的哪一部分数据作为自己的 props。...react-redux提供了connect函数，connect是一个高阶函数，首先传入mapStateToProps、mapDispatchToProps，然后返回一个生产 Component 的函数(...当需要拆分数据处理逻辑时，你应该使用 reducer 组合而不是创建多个 store； redux一个特点是：状态共享，所有的状态都放在一个store中，任何component都可以订阅store中的数据...；并不是所有的state都适合放在store中，这样会让store变得非常庞大，如某个状态只被一个组件使用，不存在状态共享，可以不放在store中；参考新版React Native+Redux打造高质量上线

5.5K2 0

精读《重新思考 Redux》

简化初始化 redux 初始化代码涉及的概念比较多，比如 compose thunk 等等，同时将 reducer、initialState、middlewares 这三个重要概念拆分成了函数方式调用，...而不是更容易接受的配置方式： const store = preloadedState => { return createStore( rootReducer, preloadedState...，因为 reducers 是分散的，如果在 reducers 中赋值，要利用 es 的默认参数特性，看起来更像业务思考，而不是 redux 提供的能力。...Reducer 直接作为 ActionCreator redux 调用 action 比较繁琐，使用 dispatch 或者将 reducer 经过 ActionCreator 函数包装。...内置了比较多的插件 rematch 将常用的 reselect、persist、immer 等都集成为了插件，相对比较强化插件生态的概念。

6832 0

React全家桶之Redux使用

使用redux 让我们闭上眼睛想想，如果用一个词描述React 和Redux 给我们留下了什么印象，我想到的不是难学，不是繁琐，而是“限制”。...而程序员是人，不是机器。当负担多个开发任务的时候，牵一发而动全身，bug 层出不穷，即使最专业的程序员，我想也会丧失勇气吧。...React和Redux技术框架最大的好处，并不是让我们无所不能，而是设定了一规矩，让每个模块只做最单一的事情。让开发者只能按照这套规矩来完成代码。...这需要react-redux提供的另外一个函数：connect connect(state=>({ fruits:state.list, }))(原来的函数组件) 原来的函数组件，映射出来，自动带上了各种状态...onAddFruit(e.target.value) e.target.value = ''; } e.persist

1.7K2 0

Redux入门到使用。

特性：可预测性(predictable): 因为Redux用了reducer与纯函数(pure function)的概念，每个新的state都会由旧的state建来一个全新的state。...JavaScript应用: 这说明Redux并不是单指设计给React用的，它是独立的一个函数库，可通用于各种JavaScript应用。...state；提供 `dispatch(action)` 方法更新 state；通过 `subscribe(listener)` 注册监听器; 通过 `subscribe(listener)` 返回的函数注销监听器...每个store会在AppDispatcher上注册它自己，提供一个callback(回调)，当有动作(action)发生时，AppDispatcher(应用发送器)会用这个回调函数通知store。...React Redux) rather than subscribe() directly. // However it can also be handy to persist the current

1.1K4 0

使用 React 和 Django REST Framework 构建你的网站

我们还使用了 Redux（前端库）来存储全局的应用程序状态（存在浏览器端）。这是我们首选，因为它允许前后端完全分离。...注意我假设你已经熟悉了 React，Redux，Django，DRF，NPM 等，本篇不是基础教程哦。...redux-logger redux-persist react-redux $ npm install --save axios react-router-dom lodash 现在，我们先只展示将前端连接后端的主要部分...} from 'redux-logger'; import { persistStore, autoRehydrate } from 'redux-persist'; import rootReducer...这样可以通过从浏览器的开发者工具检查 redux-logger 的输出，来查看 setToken redux 的 action 结果了。 ?

8.3K7 0

js手写面试题总结

== "function") { throw new TypeError(callback + ' is not a function'); } const O = Object(this);...function(promiseArr) { return new Promise((resolve, reject) => { promiseArr.forEach(p => { // 如果不是...//先将拿到的试着进行json转为对象的形式 try{ item = JSON.parse(item); }catch(error){ //如果不行就不是...}}用法let storage = new Storage();storage.setItem({ name:"name", value:"ppp"})下面我把值取出来let value = storage.getItem...curry.call(this,fn,newArgs); }else{ return fn.apply(this,newArgs); } }}// 写法2// 分批传入参数// redux

8093 0

Koa源码阅读

== 'function') throw new TypeError('Middleware must be composed of functions!')...，因此中间件函数也都支持同步和异步函数。...中间件的next()时间上就是下一个中间件函数，如果你不调用，之后的其它中间件都不会调用了。实现上compose这个简单精巧的函数在前端界很有名了，Redux的插件系统也是取经于此。...，因此中间件函数也都支持同步和异步函数。...中间件的next()时间上就是下一个中间件函数，如果你不调用，之后的其它中间件都不会调用了。实现上compose这个简单精巧的函数在前端界很有名了，Redux的插件系统也是取经于此。

7111 0

React 组件化开发（二）：最新组件api

如果连这点觉悟都没有，那就不是一个合格的程序员。而雇主的本质是逐利，最忌讳的是重构，这个问题可以请高水平的工程师来得到缓解，但不可能彻底解决。...setFruits(fruits.concat(e.target.value)) e.target.value=''; } e.persist...在redux中，reducer类似vuex中的mutation，接收action，改变state。...onAddFruit(e.target.value) e.target.value = ''; } e.persist...也不见得这种方法完全取代redux。 React表单组件设计除了重构，还有一个重要的地方是造轮子。 antd的表单实现 ?

2.7K1 0

社招前端高频面试题

obj) { cloneObj[i] = obj[i]; } return cloneObj;}深克隆：考虑基础类型引用类型RegExp、Date、函数不是 JSON 安全的会丢失 constructor...: f.b is not a functionab解析：f 并不是 Function 的实例，因为它本来就不是构造函数，调用的是 Function 原型链上的相关属性和方法，只能访问到 Object 原型链...要想拿到目标事件对象，必须显式地告诉 React——我永远需要它，也就是调用 e.persist() 函数，像下面这样：function handleChange(e) { // Prevents React...props 绑定到组件上const mapStateToProps = (state) => { return { count: state.count }}这个函数的第一个参数就是 Redux...connectconnect做了些什么它真正连接 Redux 和 React，它包在我们的容器组件的外一层，它接收上面 Provider提供的 store 里面的 state和 dispatch，传给一个构造函数

7283 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭