React中setState修改深层对象

React中setState修改深层对象

Object.assign文档

准备工作：

测试 扩展运算符

testSpread() {
    let testObj = {
        'A': 1,
        'B': 2,
        'C': 3,
    };
    let data = {
        ...testObj,
        'A': 100,
    };
    console.log('testObj', testObj);//testObj {"A": 1, "B": 2, "C": 3}
    console.log('data', data);      //   data {"A": 100, "B": 2, "C": 3}
}

测试 Object.assign

testAssign() {
    const target0 = {a: 1, b: 2};
    const source1 = {b: 4, c: 15};
    const source2 = {b: 5, d: 10};
    const returnedTarget = Object.assign(target0, source1, source2);
    console.log('target0', target0);
    // target0 {"a": 1, "b": 5, "c": 15, "d": 10}
    console.log('returnedTarget', returnedTarget);
    //returnedTarget {"a": 1, "b": 5, "c": 15, "d": 10}
}

对比 扩展运算符/Object.assign

testSpreadAndAssign() {
    let A1 = {a: 1, b: 2};
    let B1 = {...A1};
    console.log('A1', A1);
    //A1 {"a": 1, "b": 2}
    console.log('A2', A2);
    //A2 {"a": 1, "b": 2}

    //上述方法实际上等价于：
    let A2 = {a: 1, b: 2};
    let B2 = Object.assign({}, A2);
    console.log('B1', B1);
    //B1 {"a": 1, "b": 2}
    console.log('B2', B2);
    //B2 {"a": 1, "b": 2}
}

修改对象

this.state = {
    list: {
        objA: {
            name: 'A0',
        },
        objB: 'B0',
    },
};

修改方法：

_onPress3() {
    //直接修改对象
    let data = this.state.list;
    data.objA.name = 'A' + Math.ceil(Math.random() * 1000);
    data.objB = 'B' + Math.ceil(Math.random() * 1000);

    this.setState({
        list: data,
    });
}

_onPress2() {
    //Object.assign
    let data = Object.assign({},
        this.state.list,
        {objB: 'B' + Math.ceil(Math.random() * 1000 * 1000 * 1000)},
        {
            objA: {
                name: 'A' + Math.ceil(Math.random() * 1000 * 1000 * 1000),
            },
        },
    );

    this.setState({
        list: data,
    });
}

_onPress1() {
    //使用扩展运算符
    let data = {
        ...this.state.list,
        objA: {
            name: 'A' + Math.ceil(Math.random() * 1000 * 1000 * 1000 * 1000),
        },
        objB: 'B' + Math.ceil(Math.random() * 1000 * 1000 * 1000 * 1000),
    };

    this.setState({
        list: data,
    });
}

完整代码：

import React, {Component} from 'react';
import {View, Button, Text} from 'react-native';

export default class Test extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            list: {
                objA: {
                    name: 'A0',
                },
                objB: 'B0',
            },
        };
    }

    componentDidMount() {
        this.testAssign();
        this.testSpread();
        this.testSpreadAndAssign();
    }

    testSpread() {
        let testObj = {
            'A': 1,
            'B': 2,
            'C': 3,
        };
        let data = {
            ...testObj,
            'A': 100,
        };
        console.log('testObj', testObj);//testObj {"A": 1, "B": 2, "C": 3}
        console.log('data', data);      //   data {"A": 100, "B": 2, "C": 3}
    }

    testSpreadAndAssign() {
        let A1 = {a: 1, b: 2};
        let B1 = {...A1};
        // { a: 1, b: 2 } 上述方法实际上等价于：
        let A2 = {a: 1, b: 2};
        let B2 = Object.assign({}, A2);
        console.log('A1', A1);
        console.log('A2', A2);
        console.log('B1', B1);
        console.log('B2', B2);
    }

    testAssign() {
        const target0 = {a: 1, b: 2};
        const source1 = {b: 4, c: 15};
        const source2 = {b: 5, d: 10};
        const returnedTarget = Object.assign(target0, source1, source2);
        console.log('target0', target0);
        console.log('returnedTarget', returnedTarget);
    }

    _onPress3() {
        //直接修改对象
        let data = this.state.list;
        data.objA.name = 'A' + Math.ceil(Math.random() * 1000);
        data.objB = 'B' + Math.ceil(Math.random() * 1000);

        this.setState({
            list: data,
        });
    }

    _onPress2() {
        //Object.assign
        let data = Object.assign({},
            this.state.list,
            {objB: 'B' + Math.ceil(Math.random() * 1000 * 1000 * 1000)},
            {
                objA: {
                    name: 'A' + Math.ceil(Math.random() * 1000 * 1000 * 1000),
                },
            },
        );

        this.setState({
            list: data,
        });
    }

    _onPress1() {
        //使用扩展运算符
        let data = {
            ...this.state.list,
            objA: {
                name: 'A' + Math.ceil(Math.random() * 1000 * 1000 * 1000 * 1000),
            },
            objB: 'B' + Math.ceil(Math.random() * 1000 * 1000 * 1000 * 1000),
        };

        this.setState({
            list: data,
        });
    }

    render() {
        return (
            <View>
                <Button title={'按钮一'}
                        color={'#00ff00'}
                        onPress={() => this._onPress1()}/>
                <Button title={'按钮二'}
                        color={'#ff0000'}
                        onPress={() => this._onPress2()}/>
                <Button title={'按钮三'}
                        color={'#0000ff'}
                        onPress={() => this._onPress3()}/>
                <Text style={{textAlign: 'center', marginTop: 20, color: '#0000ff'}}>
                    {JSON.stringify(this.state.list.objA.name)}
                </Text>
                <Text style={{textAlign: 'center', marginTop: 20, color: '#ff0000'}}>
                    {JSON.stringify(this.state.list.objB)}
                </Text>
            </View>
        );
    }
}