React数据更新,视图不更新

问题描述：

做日历功能的时候，发现了一个问题：切换月份发现数据更新，但是视图不更新

• 第一次打开日历，正常显示，没有问题

  
  image.png

• 切换月份，页面变空白

  
  image.png

[
  {
    
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 1
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 2
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 3
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 4
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 5
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 6
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 7
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 8
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 9
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 10
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 11
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 12
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 13
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 14
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 15
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 16
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 17
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 18
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 19
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 20
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 21
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 22
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 23
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 24
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 25
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 26
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 27
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 0,
    "num": 28
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 1638115200000,
    "num": 29,
    "price": 2443,
    "priceRMB": "¥2443"
  },
  {
    "year": 2021,
    "month": 11,
    "saleDate": 1638201600000,
    "num": 30,
    "price": 2443,
    "priceRMB": "¥2443"
  }
]

问题代码：

this.setState({
      dayList:this.state.dayList
},()=>{
      console.log('更改数据为B----',JSON.stringify(this.state.dayList));
})

解决办法：使用es6的扩展运算符拷贝dayList

this.setState({
      dayList:[...this.state.dayList]
},()=>{
      console.log('更改数据为B----',JSON.stringify(this.state.dayList));
})

JS中的深拷贝和浅拷贝