Держите базовое состояние в React Component

Question

У меня проблемы с состояниями в React.Я не нахожу способ сохранить базовое состояние (приносит из реквизита родителя) и динамическое состояние (управляется пользователем).Позвольте мне объяснить:

У меня есть два компонента: родитель и ребенок.Где:

Parent.js

class Parent extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            children: []
        }
    }

    // Called some back-end service
    getData(){
        let arr = Array.from({...this.state.children});
        let service = new DataService();
        let data service.getAll();
        for(let i in data){
            // where data[i] = { boo: 'bye' }
            arr.push(<Child data={data[i].something} />);
        }
    }

    componentDidMount(){
        this.getData();
    }

    render(){
        return(
            {this.state.children}
        )
    }        
}

И Child.js:

class Child extends React.Component {
    constructor(props){
        this.state = props.data;
        this.baseState = {...props.data} // Cloned object 
    }

    handleChange(){
        // The point is change component's state but there is something weird
        this.setState({boo: 'hello'});

        console.log(this.state); // {boo: 'hello'}
        console.log(this.baseState); // {boo: 'hello'} --- why???
    }

    render(){
        return(
            <div onClick={() => this.handleChange()}>I'm a child!</div>
        )
    }
}

Когда я изменяю состояние ребенка, изменяется и baseState!Я клонировал объект, чтобы избежать такого поведения, но я не знаю, что происходит.

Спасибо за вашу помощь!

Answer 1

Решено!

Моя проблема заключалась в том, чтобы сделать мелкую копию с реквизита родителя.Я использую библиотеку lodash для клонирования объекта и сохранения тех же свойств:

import React from 'react';
import _ from 'lodash';    

class Child extends React.Component {
    constructor(props){
        this.state = props.data;
        this.baseState = _.cloneDeep(props.data); // Cloned object
    }
}