react State改变,页面却没有改变
react 小白编程
做项目时遇到了个问题,无论我怎么查看我的action、reducer 还是 dispatch 函数,都没有发现有什么毛病。但是 debugger 的时候,state 改变了,页面却没有变。
困扰了我好长时间,后来发现是因为我在使用 reducer 修改 state 的时候,遇到了一个极大的错误🙅!
我要修改的 state 值是一个数组,而我却在原数组上使用 Splice 进行修改。
熟悉 arr.splice() 函数的应该知道,该方法是在原数组上进行修改。而我的原数组就是我的真是的 state。
而 React 的核心是虚拟 DOM,在 render 的时候,会比较前后两个 state 是否发生变化,如果发现没有发生变化,则不进行 DOM 更新。而我在 reducer 的时候直接在原 state 上进行修改,那么在 render 的时候,无论怎样都是发现不了 state 的变化的。
所以,针对上述问题,进行更正:先用 arr.slice() 方法获得一个该数组的副本,然后再对其副本进行修改。这样就正常了!
⚠️所以,使用数组方法的时候,一定要知道哪些是会产生一个数组副本,哪些是在数组本身上进行修改的!
学习、交流、记录、编辑一部自己的知识库