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

最新推荐文章于 2024-12-23 22:54:31 发布

前端小小白zyw

最新推荐文章于 2024-12-23 22:54:31 发布

阅读量4.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： React 文章标签： React react-redux

本文链接：https://blog.youkuaiyun.com/Vue2018/article/details/101023506

React 专栏收录该内容

15 篇文章

订阅专栏

本文探讨在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
  }
}