码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-09-05 21:44:36      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:关于   简单的   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 })
 

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

标签:关于   简单的   current   article   数组   sel   item   fun   splice   

原文地址:https://www.cnblogs.com/yunyea/p/11469930.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!