在React开发中遇到了一个问题:

需求是在一个选择组件中选择数据mydata数组,确定后将mydata数组返回到父组件,再次打开该选择组件时,从父组件获取之前选择的数据mydata并显示为已选择。

    /* 打开选择组件 */
showModal = () => {
this.setState({
comVisible: true
});
const { mydata } = this.props;
this.setState({
mydata: mydata
});
console.log(this.state.mydata);
this.onChange();
} /* 确定-将data返回父组件 */
handleOk = () => {
if (this.state.mydata.length > 0) {
this.setState({
comVisible: false
});
// 返回父组件data
this.props.getMyData({
mydata: this.state.mydata,
...
});
} else {
message.error("data is null");
}
} /* 取消-不对data做操作 */
handleCancel = () => {
this.setState({
comVisible: false
});
}
/* 选择data */
onChange = (mydata) => {
let mydata = this.state.mydata;
Object.keys(otherdata).forEach((title) => {
...
// 对mydata做一些改变
});
this.setState({
mydata
});
}

大概流程如下:

按照逻辑,在选择组件中选择mydata,触发onChange事件,将此时改变的mydata设置为state.mydata,点击确定后触发handleOk函数,将state.mydata传给父组件。但若点击取消,则触发handleCancel,不做任何操作。

那么问题来了,我点击了取消,再次打开选择组件,从父组件取mydata的值,取到的是点击取消之前选择的mydata值。按理说点击了取消不做操作,该值是不会传给父组件的,但是为什么从父组件会取到改变后的值呢?

经过一系列尝试后发现,问题的原因在于数组的表现形式就是内存中的一段连续的内存地址,数组名称其实就是连续内存地址的首地址。onChange中对mydatastate.mydata的改变会直接改变该数组所指向的地址中的数据,而父组件中的mydata也是指向该数组的,所以一旦state.mydata发生改变,即使不将改变后的mydata传给父组件,父组件的mydata也会改变。

修改:给父组件传值时使用中间变量,并且数组赋值时,使用先结构再赋值的方式生成新的数组。

    /* 打开选择组件 */
showModal = () => {
this.setState({
comVisible: true
});
const { mydata } = this.props;
this.setState({
mydata: mydata
});
this.onChange();
} /* 确定-将data返回父组件 */
handleOk = () => {
if (this.state.mydata.length > 0) {
// 返回父组件data,改变后的中间变量
this.props.getMyData({
mydata: this.state.tempdata,
...
});
} else {
message.error("data is null");
}
} /* 取消-不对data做操作 */
handleCancel = () => {
...
}
/* 选择data */
onChange = (mydata) => {
// 改变赋值方式
let mydata = [];
mydata.push(...this.state.mydata);
Object.keys(otherdata).forEach((title) => {
...
// 对mydata做一些改变
});
// 使用中间变量,不直接修改state.mydata
this.setState({
tempdata: mydata
});
}

总结:

在JS中,

数组和对象是地址型变量

数组和对象是地址型变量

数组和对象是地址型变量


基础知识一定时刻记在脑子里。。。

在React开发中遇到的问题——数组引用赋值的更多相关文章

  1. 聊一聊,React开发中应该规避的点

    原文永久链接: https://github.com/AttemptWeb..... 下面说到的React开发中注意的问题,部分是自己遇到过的点,部分是收集的,也算是React代码优化部分,这次做一个 ...

  2. React开发中react-route-dom使用BrowserRouter部署到服务器上刷新时报404的问题

    React项目部署中遇到的问题 react开发中react-route使用BrowserRoute路径在iis服务器上刷新时报404的问题 解决:在发布的项目根目录添加web.config配置文件 在 ...

  3. react 开发中的问题简记

    1.什么时候用props 什么时候用state ? 不能使用props:当页面组件存在URL跳转问题时候,原因:若单独刷新,他会报错,拿不到前面的数据: 使用props场景:当组件为页面组件的一部分即 ...

  4. React 开发中面临的九个重要抉择

    抉择系列:在技术开发的过程中我们会面临着各种各样的抉择,我们在不同情境下该如何选择恰当的技术,这是本系列文章想要解决的问题. 在 React 开发的过程中我们常常会遇到一些抉择,下面我将选取其中一些个 ...

  5. react开发中如何使用require.ensure加载es6风格的组件

    其实用的babel,在浏览器端就应该可以加载,之前少了个default: require.ensure([],(require) => { let A = require('./a.js').d ...

  6. react开发中的小细节

    目前开始使用react余遇到的问题还不是很多,但还是希望总结一下. react中的属性prop: 在react中组件的父子组件的通信是基于prop的,当然对于底层的东西不是特别了解,但可以说一说它的基 ...

  7. c语言结构体中的一个char数组怎么赋值?

    目录 前景提示 这里的结构体处理的步骤 一.char数组类型的处理 二.char数组指针类型的处理 三.全部代码 1. char数组 2. char数组指针 结语 前景提示 定义一个结构体,结构体中有 ...

  8. Mybatis开发中前端控制器注解@Controller 引用的类错误

    import org.springframework.web.portlet.ModelAndView; 错误 import org.springframework.web.servlet.Model ...

  9. 21个React开发神器

    摘要: React开发神器. 原文:22 Miraculous Tools for React Developers in 2019 译者:前端小智 下列工具中的重要性与排序无关. 1.Webpack ...

随机推荐

  1. Gora快速入门 分类: C_OHTERS 2015-01-30 09:55 465人阅读 评论(0) 收藏

    概述 Gora是apache的一个开源项目. The Apache Gora open source framework provides an in-memory data model and pe ...

  2. CTR深度学习

    深度学习在 CTR 中应用 一. Wide&&Deep 模型 首先给出Wide && Deep [1] 网络结构: 本质上是线性模型(左边部分, Wide model) ...

  3. [乐意黎原创] eclipse Kepler Selected SVN connector library is not available or cannot be loaded

    问题描写叙述:已经安装了subversive,可是在从SCM导入maven项目时.还是提示报错(如标题),依据报错原因发如今Team>SVN中确实没有svn连接器. 折腾了半天, 硬是没有结果. ...

  4. [Angular] Testing @Input and @Output bindings

    Component: import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output } from '@angular ...

  5. 摘录-MYSQL5.7版本sql_mode=only_full_group_by问题

    下载安装的是最新版的mysql5.7.x版本,默认是开启了 only_full_group_by 模式的,但开启这个模式后,原先的 group by 语句就报错,然后又把它移除了. 一旦开启 only ...

  6. SpringCloud微服务框架搭建

    一.微服务架构 1.1什么是分布式 不同模块部署在不同服务器上 作用:分布式解决网站高并发带来问题 1.2什么是集群 多台服务器部署相同应用构成一个集群 作用:通过负载均衡设备共同对外提供服务 1.3 ...

  7. [SCSS] Reuse Styles with the SCSS @mixin Directive

    Copy/pasting the same code is redundant and updating copy/pasted code slows development velocity. Mi ...

  8. 【转】dbx用法讲解

    http://blog.chinaunix.net/uid-25544300-id-328735.html dbx 命令 用途 提供了一个调试和运行程序的环境. 语法 dbx [ -a Process ...

  9. PhpStorm常用快捷键(不多够用)

    PhpStorm常用快捷键(不多够用) 一.总结 一句话总结: 1.前进 解答:Ctrl+shift+ z 2.跳转到指定行数 解答:Ctrl+G 3.块注释 解答:ctrl + shift + / ...

  10. 接入Erlang控制台的几种方法

    在window中调试的时候我们可以通过启动多个cmd窗口运行Erlang节点,在生产环境中我们需要Erlang服务在Centos服务器上后台运行;这就需要在启动的时候添加启动参数detached来脱离 ...