react使用redux界面数据不更新的问题(函数组件和类组件对应解决办法)

最新推荐文章于 2024-07-15 15:36:12 发布

逍遥同学xy

最新推荐文章于 2024-07-15 15:36:12 发布

阅读量3.4k

点赞数 4

分类专栏： React 文章标签： react.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_45804129/article/details/125795520

版权

React 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Redux中，当Store数据更新后，组件界面不会自动刷新的问题。为解决此问题，对于函数式组件，可以通过创建一个更新状态并利用`useState`和`useEffect`来监听Store变化，当Store更新时，触发组件重新渲染。而对于类组件，可以在`componentDidMount`生命周期方法中订阅Store，并使用`setState`来手动更新组件状态，从而更新界面数据。

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

redux中，当store数据更新后，界面数据并不会直接更新，需要手动更新

如果是函数式组件，手动更新方式如下

// 大坑：redux中，当store数据更新后，界面数据并不会直接更新，需要手动更新
  // 初始化一个update数据使用useState()，主要是为了通过setUpdate()来更新组件
  // 模拟render()生命周期，实现组件重新加载，以更新界面的store数据
  const [update,setUpdate] = useState({})
  
  // useEffect模拟componentDidMount()生命周期
  useEffect(() => {
    // store.subscribe()是redux提供的，监测store更新的函数
    store.subscribe(() => {
      // 当store数据更新后执行 setUpdate() ，组件重新加载，实现界面store数据更新
      setUpdate({})
    })
  })

类式组件，使用生命周期直接在store.subscribe()中调用setState()即可实现更新数据

componentDidMount() {
    store.subscribe(() => {
      this.setState({})
    })
  }