React修改数组对象的注意事项及说明_React

export default {
    name: "home",
    data() {
        return {
            testArr: ['苹果','香蕉']
        };
    },
    created(){
        this.testArr.push('橘子')
    }
};
...

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            testArr: ['苹果','香蕉']
        };
    }
    componentDidMount(){
        this.setState({
            testArr:[...this.state.testArr,'橘子']
        })
    }
    render(){
        return (
            <React.Fragment>
                <p>{this.state.testArr}</p>
            </React.Fragment>
        )
    }
}

//删除testArr中的樱桃
...
constructor(props) {
    super(props);
    this.state = {
        testArr: ['苹果','香蕉','橘子','樱桃','橙子']
    };
}
componentDidMount(){
    this.setState({
        testArr:this.state.testArr.filter(res=>res!=='樱桃')
    })
}
...

...
constructor(props) {
    super(props);
    this.state = {
        testObj1:{
            chineseName:'橘子',
            englishName:'orange'
        },
        testObj2:{
            color:'yellow',
            shape:'circle'
        },
        testObj:{}
    };
}
componentDidMount() {
    this.setState({
        testObj: Object.assign(this.state.testObj1,this.state.testObj2)
    })
}
...

//testObj的apple的color改成green
...
constructor(props) {
    super(props);
    this.state = {
        testObj: {
            banner: {
                name: '香蕉',
                color: 'yellow'
            },
            apple: {
                name: '苹果',
                color: 'red'
            }
        }
    };
}
componentDidMount() {
    this.setState({
        testObj: {
            ...this.state.testObj,
            apple:{
                ...this.state.testObj.apple,
                color:'green'
            }
        }
    })
}
...

const currentPageVideoList=[...this.state.currentPageVideoList];
this.setState({currentPageVideoList: currentPageVideoList.map((item, key)=> 
    key==index?{...item, coverImg: this.state.defaultImg}:item
)})