原因:组件key值的设置不规范导致。
解决办法:给数据项设置唯一的ID。使用ID给组件设置KEY值,而不要使用,随机的,或者按顺序设定key值。
问题情况:
{
data : [
{数据项1},
{数据项2},
{数据项3},
.
.
.
]
}
/** 渲染组件
* data 当期数据
* i 当期下标
* delete 删除选框开启
* SetDelete 设置删除函数
*/
that.state.data.map(function(data,i){
return <Tip
key={'Tip_'+i}
data={data}
delete = {deleteStyle}
SetDelete = {that.SetDelete}
/>
})
//批量删除
Delete : function(){
for(var i=0; i<this.state.data.length; i++){
if(this.state.data[i].delete){
this.state.data.splice(i,1);
this.setState({});
i--;
}
}
由于在渲染的时候 按顺序给子组件 设置KEY值。
导致在操作数组后,渲染混乱。
//使用ID,得到预期结果
key = {'Tip_'+data.id}
拓展:React的渲染机制
首先,React渲染时,并不是将所有组件都重新渲染一边。
其次,React渲染时,有一定的优化机制。
React在渲染下一个状态时,先生成一棵虚拟的DOM树,和当前的状态的DOM树进行对比,更新不一致的地方。
在渲染的时候,非常重要的一个属性就是KEY值,React通过比较KEY值相同的节点,来判断其前后状态的一致性,以及是否需要更新。
在我遇到的问题中,我就是因为按照顺序 设置KEY值。所以如果删除{数据项2}。在设置key值得时候,仍然会按顺序设置key值,0,1,2,3…
React在比较时,虽然{数据项2}被删除了,但是{数据项2}内部的数据并没有改变。所以当KEY值没有变化时。React认为{数据项2}没有变化。则不会对其进行更新,反而由于,数组的长度变化,导致data.map()渲染时,会总是抛弃最后一个数据项。(个人理解,有不对的地方,希望大家指正。)
所以在设置KEY值得时候,尽量设置有意义的ID,能跟随数据状态变化而变化的值。来避免出现意料不到的错误。