Клонирование часть state до update?

Question

[Yaroslavv]

По фокусу на инпут пытаюсь клонировать this.state.collection и записать его в oldCollection,
после изменения collection,меняется следом oldCollection

//исходное состояние
        this.state = {
            collection: {item:true}
            oldCollection:null
        };

    onFocus() {//копирую по фокусу
        this.setState({
          oldCollection: this.state.collection
        });
    }

    itemChange(event) {//меняю исходный объект
        let collection = {item:false}
        this.setState({
            collection
        });
       console.log(this.state.oldCollection)//{item:false}
    }

почему oldCollection поменял данные следом и как исправить это,Спасибо!

Answer 1

[Yaroslavv]

this.setState({
 oldCollection: JSON.parse(JSON.stringify(collection))
});

Answer 2

[bender1000]

Как насчёт oldCollection: {...this.state.collection}

Comments

[Антон Спирин]

не в этом дело

[bender1000]

Антон Спирин, правда? А в чём? )))

[Антон Спирин]

bender1000, при вызове:

this.setState({
  oldCollection: this.state.collection,
});

вы запишите в oldCollection ссылку на объект, который при вызове:

this.setState({
  collection: { item: false },
});

не будет изменен, так как обновление state иммутабельно. Поэтому его клонирование:
oldCollection: {...this.state.collection},
в данном случае, будет бессмысленной операцией.

[Yaroslavv]

не решает проблему,в react tools изменение состояний этих обьектов,меняют друг друга..

[Антон Спирин]

Yaroslavv, проблема в другом месте. Скиньте весь код компонента, а еще лучше перенесите текущий рабочий вариант в песочницу(например codesandbox)

Answer 3

[Дима]

Попробуйте посмотреть в сторону shouldComponentUpdate(nextProps, nextState). Также в некоторых случаях подойдет и redux в одном компоненте.