React Dva项目创建Model,并演示数据管理与函数调用

这篇具有很好参考价值的文章主要介绍了React Dva项目创建Model,并演示数据管理与函数调用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文的话 我们讲一下定义Model
也就是Dva中redux的部分
我们打开一个刚创建的Dva项目 看到 src下的models 下 就是Model部分 这里 他给我们了一个案例
React Dva项目创建Model,并演示数据管理与函数调用,react.js,javascript,前端
如果用 react-redux 管理 模块多了之后会看着比较乱 或 很麻烦
但是 大家会发现 在Model中 他将这些都放在一起了
只需要创建一个这样的文件就可以了

我们在这个models下创建一个自己的 就叫 product.js
React Dva项目创建Model,并演示数据管理与函数调用,react.js,javascript,前端
然后编写代码如下

export default {
    namespace: "product",
    state: {
        productList: [
            {
                name: "小猫猫"
            },
            {
                name: "小狗狗"
            }
        ]
    },
    reducers: {
        updatelist(state,action) {
            let stateClon = deepCopy(state);
            stateClon.productList.push(action.payload);
            return stateClon;
        }
    }
}

function deepCopy(obj) {
    let str = JSON.stringify(obj);
    let appobj = JSON.parse(str);
    return appobj;
}

这里 namespace是一定要写的 相当于名字 然后 state就是我们的数据了 对掌握redux的伙伴比较好理解
reducers中写的是我们操作数据的函数 这里 我们写了一个向数组中加数据的updatelist
其中用到了一个deepCopy
这个是我们用来做深拷贝的 拷贝state
因为redux写明不建议开发者直接操作state 所以 我们先拷贝出来 然后处理好 在return回去

然后 我们看到 src下的index.js 将Model部分注释的代码解开
React Dva项目创建Model,并演示数据管理与函数调用,react.js,javascript,前端
就可以看到 它引入的是我们example的例子
我们直接按他这个写法 将引用的文件改成我们自己写的product.js
React Dva项目创建Model,并演示数据管理与函数调用,react.js,javascript,前端
然后 我们来试着操作这个数据

我们找一个组件编写代码如下

import React from "react"
import { connect } from "dva";

class dom extends React.Component {
  constructor(props){
    super(props);
    this.state = {
    }
  }

  getProduct = () =>{
    console.log(this.props.productList);
  }

  render(){
    return (
      <div>
         <button onClick={this.getProduct} type="primary">获取</button>
      </div>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    productList: state.product
  }
}
export default connect(mapStateToProps)(dom);

首先 你要引入connect 然后声明一个函数 名字顺便 我这里直接叫 mapStateToProps 他接收一个参数state 然后定义 productList 等于 state.product
这个 state 后面点的等下就要和你Model中的product对应
这样 他就会将对应的Model给你
然后调用connect 第一个参数是获取Model的函数 第二个是组件的实体
此时 我们点击按钮获取 来看一下this.props.productList中的内容
React Dva项目创建Model,并演示数据管理与函数调用,react.js,javascript,前端
可以看到 这就是我们product state的数据了
React Dva项目创建Model,并演示数据管理与函数调用,react.js,javascript,前端
那么 这里 读到数据了 我们还是要来调用updatelist
我们加一个按钮

<button onClick={this.addProduct} type="primary">添加</button>

addProduct方法参考代码如下

addProduct = () => {
  this.props.dispatch({
    type: "product/updatelist",
    payload: {
      name: "新数据"
    }
  })
}

React Dva项目创建Model,并演示数据管理与函数调用,react.js,javascript,前端
这里 我们调用this.props.dispatch type 就是 namespace名/方法名
React Dva项目创建Model,并演示数据管理与函数调用,react.js,javascript,前端
第二个参数 就是方法接收到的action

运行代码
然后 我们先点击添加 在点击获取
React Dva项目创建Model,并演示数据管理与函数调用,react.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-554584.html

到了这里,关于React Dva项目创建Model,并演示数据管理与函数调用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React 状态管理:高效处理数组数据的5种方法

    为什么在 React 中,状态(state)如果是数组类型,需要单独处理?主要有以下几个原因: 不可变性(Immutability) : React 中的状态是不可变的,意味着我们不能直接修改状态,而是要创建一个新的状态对象。对于数组来说,直接修改数组元素是不符合 React 的设计原则的。 性能优化 : React 使用

    2024年04月10日
    浏览(40)
  • React中使用mobx管理状态数据使用样例

    MobX 是一个身经百战的库,它通过运用透明的函数式响应编程(Transparent Functional Reactive Programming,TFRP)使状态管理变得简单和可扩展。官网地址:关于 MobX | MobX中文文档 | MobX中文网 mobx-react-lite是一个mobx和react建立链接的依赖库,也必须安装才可以使用 并使用store/index.js统一

    2024年02月13日
    浏览(51)
  • React Dva项目中.roadhogrc.mock.js直接自动导入mock目录下所有文件方式

    上文 React Dva项目中模仿网络请求数据方法 中,我们书写了Dva项目模拟后端数据的方式 但是 我们.roadhogrc.mock.js中的这个处理其实并不好用 我们还需要一个一个的引入 我们可以直接靠一段代码 这就是一个读流的方式 获取mock目录下的所以文件 然后找出后缀为 .js的文件 全部弄

    2024年02月15日
    浏览(34)
  • Docker数据管理和镜像创建

    管理Docker容器中数据主要有两种方式:数据卷(Data Volumes)和数据卷容器(DATa Volumes Containers)。 数据卷是一个供容器使用的特殊目录,位于容器中。可将宿主机的目录挂载到数据卷上,对数据卷的修改操作立刻可见,并且更新数据不会影响镜像,从而实现数据在宿主机与容

    2024年02月15日
    浏览(43)
  • 数据库创建与管理

    目录 一、创建数据库 1.准备创建数据库 2.创建数据库实例分析 方法一:使用对象资源或企业管理器创建数据库  方法二:使用Transact-SQL命令创建数据库 二、管理数据库 1.修改数据库 使用SQL命令修改数据库 2.删除数据库  使用使用Transact-SQL命令 (1)确定数据库的名称

    2024年02月04日
    浏览(35)
  • 数据库的创建与管理

    一、实验目的 1. 掌握在SQL Server中使用对象资源管理器和SQL命令创建数据库。 2. 掌握在SQL Server中使用对象资源管理器和SQL命令查看数据库。 3. 掌握在SQL Server中使用对象资源管理器和SQL命令修改数据库。 二、实验硬、软件环境 开发环境: Windows XP 操作系统及以上版本 数据库

    2024年02月06日
    浏览(38)
  • SQL 数据库语句- 创建和管理数据库

    SQL CREATE DATABASE 语句用于创建一个新的 SQL 数据库。 以下 SQL 语句创建了一个名为 \\\"testDB\\\" 的数据库: 通过这个简单的语句,你可以成功地创建一个名为 \\\"testDB\\\" 的数据库。记得在实际应用中,你可能需要添加其他选项,比如指定字符集、校对规则等,以满足具体需求。 SQL DRO

    2024年02月05日
    浏览(81)
  • 达梦数据库创建及数据库实例管理

    数据库配置助手创建数据库调用 dbca.sh 图形化界面创建数据库: [dmdba@DCA02 tool]$ ./dbca.sh 2021-01-11 11:43:45 [com.dameng.dbca.Startup] [INFO] 启动 DBCA 指定数据库名称、实例名称(单机情况下数据库和实例名称可以相同),指定端口号: 簇大小、页大小、字符集、 字符串 大小写敏感、

    2023年04月08日
    浏览(50)
  • 数据库实验 实验一 数据库创建与管理

    注:此内容仅仅只是记录成长与分享学习,不能保证绝对正确 实验一 数据库的创建与管理 实验日期:   2022   年 3 月   25 日  星期   五     实验地点:   宿舍      一 实验目的 1. 熟练掌握创建、删除数据库。 2. 查看和修改数据库属性。 二 实验要求 1. 请大家务必动

    2024年02月01日
    浏览(67)
  • Docker 的数据管理、容器互联、镜像创建

    目录 一、数据管理 1.数据卷 2. 数据卷容器 二、容器互联(使用centos镜像) 三、Docker 镜像的创建 1.基于现有镜像创建 1.1首先启动一个镜像,在容器里修改 1.2将修改后的容器提交为新的镜像,需使用该容器的id号创建新镜像 2.基于本地模板创建 2.1下载模板文件生成镜像  2

    2024年02月16日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包