React第三方组件2(状态管理之Refast的使用②异步修改state)

  • Z时代
  • 2024-01-10
  • 分类：综合

react


本教程总共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假数据！

本文完 

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

如果你有什么问题,可以在下方留言给我们!


以上是 React第三方组件2(状态管理之Refast的使用②异步修改state) 的全部内容， 来源链接： utcz.com/z/384048.html

回到顶部