Как отключить дочерний реквизит от переданного состояния родителя?

Question

Я видел много вопросов, касающихся обновления состояния родителя из дочернего компонента, однако мой вопрос как раз наоборот.У меня есть компонент, модальное окно редактирования, используемое для изменения объектов, хранящихся в состоянии родителя.Я хочу, чтобы эти изменения были скопированы в родительский, только если пользователь сохраняет эти изменения, которые обрабатываются функцией, которую я передаю дочернему компоненту.В настоящее время каждый раз, когда я делаю изменение в prop.obj в дочернем объекте, это изменение регистрируется родителем при повторном рендеринге.

вот пример одного из моих обработчиков изменений

handleChange(e) {
    this.state.childobj.myvaluetochange = e.target.value
}

В моем родителе, как указано, я передаю obj ребенку из состояния родителя, например, так:

<MyComponent obj={this.state.obj} />

, чтобы подвести итог:

Я отправляю объект состояния ребенку

Дочерний объект использует this.props.obj для использования этого объекта в форме и использует обработчики для обновления

Когда в дочернем элементе обнаруживаются изменения, они отражаются на объекте состояния родителя при обновлении -Я не хочу этого, если они не решат сохранить.(это обрабатывается функцией, переданной от родителя)

, чтобы уточнить, я хочу, чтобы состояние obj, передаваемое ребенку, действовало как совершенно отдельный объект, когда оно живет в ребенке.Это возможно?

Спасибо

Answer 1

Вы создаете ссылку на родительский объект, а затем изменяете состояние, которое будет отражаться в родительском объекте.Самый простой способ - создать новую версию, используя оператор распространения для создания нового объекта:

this.state = {childObj: {...this.props.obj}}

Answer 2

Это происходит из-за того, что вы изменяете данный реквизит.

Чтобы избежать этого, вы должны создать новый экземпляр this.props.obj.Вероятно, вы хотите сделать это в методах жизненного цикла "componentWillMount" и "componentWillReceiveProps".Для создания нового экземпляра объекта вы можете использовать Object.assign или операторы распространения.