react-redux 中state数据发生变化,页面并没有渲染

本文探讨在React项目中使用Redux进行状态管理时,直接修改state数据导致页面不重新渲染的问题。通过分析原因,提供了两种解决方案:使用展开运算符和Object.assign()实现数据的不可变更新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

上一篇文章我们讲了如何在 React项目中添加 react-redux 状态管理 ,遗留一个比较棘手的问题:当我们直接修改state中的数据时,发现数据发生了变化,但是页面并未渲染

代码:

let data = {
  list:[],
  status:false,
}

export default function (state = data, action) {
  switch (action.type) {
    case 'fixList':
      // 直接修改数据
      !state.list.includes(action.data) ? state.list.push(action.data) : console.log('已存在该商品')
      return state
    default:
      return state
  }
}

上面代码执行完毕,我们会发现数据发生变化,但是页面并未渲染

官网明确表明:
state的引用没变,导致比较的时候前后state相等,所以没触发渲染。
redux是不可变数据的,每次数据变更需要返回一个新的数据。

解决方法:

①:使用 展开运算符 […]

let data = []

export default function (state = data, action) {
  switch (action.type) {
    case 'append':
      state.push(action.data)
      return [...state]
    default:
      return state
  }
}

②:使用Object.assign() 浅拷贝

let data = {
  list:[],
  status:false,
}

export default function (state = data, action) {
  switch (action.type) {
    case 'fixList':
      let list = state.list
      !list.includes(action.data) ? list.push(action.data) : console.log('已存在该商品')
      return Object.assign({},state,{list:[...list]})
    default:
      return state
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小小白zyw

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值