标签：关于 简单的 current article 数组 sel item fun splice
项目中遇到个问题，有一个数组参数，删除数组中一个元素，并且重新改变state但是页面没有重新渲染，先面用一个简单的todolist重现下问题
如下渲染出来menu，当我点击删除时触发onClose事件，在onClose中直接对listData进行操作，打印出的数据是删除后的，但是页面没有重新渲染
const data=[
{name:‘小A‘,age:‘10‘,id:‘1‘},
{name:‘小B‘,age:‘11‘,id:‘2‘},
{name:‘小C‘,age:‘10‘,id:‘3‘},
{name:‘小D‘,age:‘11‘,id:‘4‘}
]
function ToDoList(){
const [listData,setListData] = useState([data]);
const onClose=(newdata,e)=>{
e.stopPropagation();
e.preventDefault();
const currentIndex = listData.findIndex(item=>item.id===newdata.id);
listData.splice(currentIndex,1)
setListData(listData)
}
return （
<Menu selectedKeys={[currentId]}>
{ listData.map((item,index)=>{
return (
<Menu.Item key={index}>
{item.name}
<Icon type="close" onClick={(e) => onClose(item,e)} />
</Menu.Item>
)
})
}
</Menu>
）
}
export default ToDoList;
问题出在我不应该直接操作listData，因为直接操作listData使它的值直接变化，在通过setListData（）修改他的状态，这时候通过setListData（）保存的最新状态和listData是相同的，会默认为state并没有发生改变，所有不会重新渲染，所以，我们需要在处理数据之前对listData做一次深拷贝，如下
const onClose=(newdata,e)=>{
e.stopPropagation();
e.preventDefault();
const currentIndex = listData.findIndex(item=>item.id===newdata.id);
const newArray = _.map(taskbarData,(val) => { return val })
newArray.splice(currentIndex,1)
setListData(newArray)
}
这样的话就可以完美解决了
总结：这里涉及到了深拷贝和浅拷贝的问题，
浅拷贝，就是两个变量都是指向一个地址，改变了一个变量，那另一个变量也随之改变。这就是浅拷贝带来的副作用，两个变量会相互影响到，因为它们指向同一个地址。如下当我改变newArray的值，listData也会随之改变
const newArray = listData
深拷贝，就是互相独立，指向的是不同的地址，一个变量改变了，另一个变量不会被影响到。
const newArray = _.map(taskbarData,(val) => { return val })
标签：关于 简单的 current article 数组 sel item fun splice
原文地址：https://www.cnblogs.com/yunyea/p/11469930.html
