使用react-redux，数据已改变，但页面未同步更新_react redux 更新后值没变

相关文章推荐

面冷心慈的帽子 · react-dnd实现拖拽API学习_exp ...· 2 周前 ·

安静的回锅肉 · 解决Pandas的to_excel()写入不 ...· 7 月前 ·

爱吹牛的柑橘 · pandas使用的25个技巧 - 山阴少年 ...· 1 年前 ·

讲道义的烈酒 · 当前不会命中断点还未为文档加载任何符号——问 ...· 1 年前 ·

活泼的石榴 · 🔥如何设置页面打印的CSS样式【浏览器打印 ...· 1 年前 ·

问题描述
在使用react-redux中，reducer的数据明明已经更改了，但是却不能触发组件的render函数，页面也没有同步更新。看了网上的一些答案，才知道在reducer是一个 纯函数 ， 不能修改参数preState ，并且当你返回preState时，react-redux并不知道数据已经更改（preState是对象引用，始终指向一个地址），而我在这里对preState进行了push操作，并把操作后的preState返回。

什么是纯函数

改正后的代码如下：
改后的代码

写在最后：若有误，请指正。

react-redux 是一种 react 官方推出的 redux 管理工具他的好处就是我们不需要再用store.subscribe去监听数据变化再去重新渲染项目了项目自己会检查状态修改并重新渲染界面。简单说就是每次要改对象数据前先将对象深拷贝一次 react 项目就能检查到并重新渲染界面了。确实问题就是你的对象如果没有深拷贝 react 项目检查不到你的数据改变了。但很多人都会遇到用一个对象明明数据改了但界面就是没有重新渲染。这个问题要修改 counter。我想实现的是一个组件能改变另一个组件button上面的text的功能，查阅了很多资料，决定用 redux 来实现，因为两个组件并不是父子组件的关系，套用起来会很麻烦。看网上很多人页面渲染不成功是直接在reducer里修改了state的值，从而导致页面未重新渲染，我尝试使用 ...object后，页面还是没有重新渲染。正确修改后的reducer: const button_text_reducer=(state,action)=>{ switch(action.type){ arr.splice(index,1) setLists(arr); 这里要根据 react 的渲染机制源码，因为 react 会判断旧状态和新状态是否有变化，如果没有变化就不渲染，所以要改变地址告诉render 是新状态要重新渲染原文链接：https://blog.csdn.net/w this.props.dispatch(updateData(value)) // 1 console.log(this.props.data)//2 状态没有更新 setTimeout(() => //3 状态发生了更新 ) 于是猜想 redux 执行action应该是同步的,但是reducer中将新状态返回更新 store数... 如果页面开始显示依赖的异步数据，而不是用户操作触发的，没有渲染异步内容时，看到部分人采用setTimeout延时渲染的方法，这是不准确而且是错误的。这里给出的一个方法，是添加所依赖的数据下渲染的判断条件。在没有拿到该异步数据前渲染为空，之后根据这个数据判断为真时渲染出有内容的页面。举一个例子，contents，这个值是根据 redux 插件连接state和dispatch，通过在componentWillMount() 钩子中调用this.props.getPageContents()得到的值，这个方法是异步遇到的问题 import { ADD_PERSON, DELETE_PERSON} from '../constant' export default function personReducer(preState = {personArr: []}, action) { const {type, data} = action let n