React第三方组件2(状态管理之Refast的使用②异步修改state)
时间:2022-05-08
本文章向大家介绍React第三方组件2(状态管理之Refast的使用②异步修改state),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1、React第三方组件2(状态管理之Refast的使用①简单使用)---2018.01.29
2、React第三方组件2(状态管理之Refast的使用②异步修改state)---2018.01.30
3、React第三方组件2(状态管理之Refast的使用③扩展ctx)---2018.02.31
4、React第三方组件2(状态管理之Refast的使用④中间件middleware使用)---2018.02.01
5、React第三方组件2(状态管理之Refast的使用⑤LogicRender使用)---2018.02.02
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
今天我们讲下Refast异步修改state!
1、我们先把 demo4 复制一份到demo5
2、修改logic.js
import apiRequestAsync from '../../../public/js/apiRequestAsync';
export default {
defaults(props) {
return {
list: []
}
},
handleAdd({getState, setState}, title) {
if (title) {
let list = getState().list;
list.push({id: list.length + 1, title: title, status: 1});
setState({list: list});
} else {
alert('不能为空')
}
},
handleItemEdit({getState, setState}, someState) {
let {id, status} = someState, list = getState().list;
list.find(data => data.id === id).status = status;
setState({list: list})
},
async getTodoList({setState}) {
let todoList = await apiRequestAsync.post('todoList');
setState({list: todoList.list})
}
}
3、修改TodoList.jsx
import React from 'react';
import Refast, {Component} from 'refast';
// 引入 logic.js
import logic from './logic';
import List from './List';
import '../../../public/css/todoList.pcss';
class TodoList extends Component {
constructor(props) {
super(props, logic);
}
componentDidMount() {
this.dispatch('getTodoList');
}
render() {
let {list} = this.state, {dispatch} = this;
return (
<div className="todoList">
<input type="text" ref="todoInput"/>
<button onClick={() => this.dispatch('handleAdd', this.refs['todoInput'].value)}>添加</button>
<div className="cont">
<div className="box">
全部
<List type={0} list={list} dispatch={dispatch}/>
</div>
<div className="box">
未删除
<List type={1} list={list} dispatch={dispatch}/>
</div>
<div className="box">
已删除
<List type={2} list={list} dispatch={dispatch}/>
</div>
</div>
</div>
);
}
}
export default TodoList;
4、修改demo 下 Index.jsx 添加 demo5 路由
import Dome5 from './demo5/Index'
<NavLink to="/Dome5" activeClassName="selected">demo5</NavLink>
<Route path="/Dome5" component={Dome5}/>
5、浏览器
成功获取到mock假数据!
- Android蓝牙配对弹出框过程分析 Android蓝牙配对弹出框过程分析
- Android6.0之修改或者查看系统属性值
- linux下Android7.0多用户编译问题
- 带你解锁蓝牙skill(0)
- WiFiAp探究实录--功能实现与源码分析
- Android7.1.1系统设置默认值大全
- Androidstudio编译c/c++jni方法
- 带你解锁蓝牙skill(三)
- 带你解锁蓝牙skill(二)
- 带你解锁蓝牙skill(一)
- Android四大组件完全解析(二)---Service
- BLE低功耗蓝牙开发相关概念问题记录
- Android四大组件完全解析(一)---Activity
- Activity加载view6.0源码分析---setContentView
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JTAG
- ICON
- BSCAN
- ILA
- VIO
- FPGA程序加载方式
- 国密SSL协议之性能测试
- 发现一个好看的手机壁纸网站,撸代码的手已经饥渴难耐了
- 还在为怎么学习Android苦恼?看完学会这些大牛资料,2年高级3年资深不是问题!
- 面试心得:一个BAT大厂面试者整理的Android面试题目,五轮面试后终于拿到Offer!
- 【Lighthouse教程】scrapy爬虫初探
- python 手把手教你基于搜索引擎实现文章查重
- Intellij IDEA 如何自动生成 serialVersionUID
- Spring事务是如何应用到你的业务场景中的?
- BFE.dev前端刷题#9. 解密消息 (Facebook面试题)