react中修改参数值没有重新渲染问题-关于浅拷贝与深拷贝

项目中遇到个问题，有一个数组参数，删除数组中一个元素，并且重新改变state但是页面没有重新渲染，先面用一个简单的todolist重现下问题

如下渲染出来menu，当我点击删除时触发onClose事件，在onClose中直接对listData进行操作，打印出的数据是删除后的，但是页面没有重新渲染

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

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做一次深拷贝，如下 

?

1 2 3 4 5 6 7 8

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也会随之改变

?

1	const newArray = listData

深拷贝，就是互相独立，指向的是不同的地址，一个变量改变了，另一个变量不会被影响到。

?

1	const newArray = _.map(taskbarData,(val) => { return val })