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

Posted 2020-11-12 yunyea

项目中遇到个问题，有一个数组参数，删除数组中一个元素，并且重新改变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 })