React下reducer中处理数组&&对象的赋值改动

Posted 2021-03-02 jianxian

（1）数组

　　reducer中处理数组数据的赋值

　　我初始化了一个字段data = [],在发起请求成功后，要将返回的list赋值给data, 这时候就有一个问题了， 因为我们都是通过Object.assign这种形式进行赋值的， 那么究竟我们要怎么将得到的数组赋给data呢？接下来我们就以具体的代码来看：

const initialState = {
        data: []
    }

    export default function testFn(state = initialState, action){
        switch(action.type){
            case ‘receive_data‘:
                let listData = [...action.payload,...state.data];
                return Object.assign({}, state, {
                    data: listData
                })
        }   
    }

好了， 如上所示， 主要利用es6的解构，从而将值赋值给listData

 

（2）对象浅拷贝Object.assign()

　　传入Object.assign()方法实现该需求（正确的方式）

Object.assign({}, this.state.detail, { key: data })

　　针对该场景也可以采用深拷贝原对象，修改对应属性后，重新赋值给state中的原对象。
　　该方法在以上方法无法解决问题的前提下应用。

　　其他方案，可以利用JSON.parse(JSON.stringify())等等方案

 　　参见文章浅谈ES6的Object.assign()浅拷贝.

.