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() 方法获得一个该数组的副本,然后再对其副本进行修改。这样就正常了!

⚠️所以,使用数组方法的时候,一定要知道哪些是会产生一个数组副本,哪些是在数组本身上进行修改的!

posted @ 2018-06-04 10:28  z春眠不觉晓z  阅读(7518)  评论(0编辑  收藏  举报