大家是如何对子组件进行删除的呢?

#1

先说一下我的方案:
子组件的props都来自父组件Ajax获取的state,
因此我的方法就是删除父组件对应的state。

很奇怪的是删除后会发生成员变量错位的问题
(例如子组件的this.number变成了已删除的子组件的this.number)。
不知道各位有没有遇到过这个问题,又或者有没有更好的删除方法呢?

#2

这个不够明确啊, 能贴具体一点的吗? 需求跟当前的代码?

#3

+1

#4

十分不好意思。
组件情况大概如下:
-组件主体
–商店列表
—商品列表
----单个商品(含有checkbox,可“选中”与“取消”)
–删除按钮

我的方案是:
每个商品被点选时其自带的ID会传入“组件主体”并在成员变量中记录下来。
点击删除按钮主体根据记录好的ID删去指定的state

“组件主体”删除商品的代码基本如下:

deleteItem:function(){
	var itemData=this.state.data;
	var itemId=this.checkedId.split("[']");
	for (var i=0;i<itemData.length;i++) {
		for (var j=0;j<itemData[i].items.length;j++) {
			for (var k=0;k<itemId.length;k++) {
				if(itemId[k]==itemData[i].items[j].id){
					itemData[i].items.splice(j,1);
					if(itemData[i].items.length==0) break;
				}
			};
		};
	};
	this.setState({
		data:itemData
	});
}

删除的方法略丑陋…见怪勿怪…

#5

循环看着好晕,应该是删除的代码有问题,如果数据正确的化,react应该没有问题,亲,能把数据结构贴出来嘛?数据结构出来了看代码就so easy了。

#6

跟不上, 我也想看具体的数据结构, 还有对应数据明确的操作是什么样的.

#7

好头痛
楼主可以先参考一下JavaScript的Array#map、Array#forEach、Array#filter这几个函数

然后是现在能想到的几个可能的坑,楼主对应一下:
react子组件的key属性是不是正确设置了
setstate是异步操作,setstate随后马上访问state会出问题
在数组遍历内部修改数组的长度在不少编程语言里都会出问题,至少应该改用不修改原数组的方法

#8

目前也遇到了这么问题,不知道楼主最终是怎么解决的

#9

其实删除的写法有很多种,我常用的写法是使用filter,