react setState一个属性总是连带改变其他属性

Question

我想实现的功能是： 每次点击button，就会向keyboard里添加元素。然后就遇到现在的问题，每次setstate更新keyBoard，总会连带着carText也会一起更新，我也没有更新carText啊，它应该是默认不变的

class KeyBoard extends Component {
    state={
        carTxt: [
            { name: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"] },
        ],
        isMiddleNumber: { name: ["1", "1", "1", "1"]},

        keyBoard: []

    };
    handleKeyBoard = () => {
        const {carTxt, isMiddleNumber} = this.state;
        let keyBoard = carTxt;
        //var keyBoard = carTxt;
        //const keyBoard = carTxt;
        keyBoard.push({...isMiddleNumber});
        this.setState({keyBoard})
    };
    render() {
        return (
            <div>
                <div className="input-field">
                    <button onClick={this.handleKeyBoard}>park</button>
                </div>
            </div>
        );
    }
}

请各位大神指点迷津，万分感谢

Answer 1

有问题的代码如下：

let keyBoard = carTxt;
//var keyBoard = carTxt;
//const keyBoard = carTxt;
keyBoard.push({...isMiddleNumber});

如上，keyBoard和carTxt是同一个引用，keyBoard.push操作修改keyBoard的同时也会更新carTxt（因为是一个引用）

解决；

let keyBoard = [...carTxt];

keyBoard.push({...isMiddleNumber});