передавать данные из компонентов в реакции

Question

У меня есть 2 компонента. В одном компоненте отрисовываю карту строк таблицы =>

это место, где отображается tDs.map

    this.state.dataOld.map(it =>(
<>
<tr onClick={()=>{it.selected_=!it.selected_;this.forceUpdate()}} value={it} key={it.id}>
{this.tDs.map(fnc => fnc(it,this.hide,this))}
</tr>
</>))

dataOld - массив из 2 объектов

tDs - это массив, подобный

function(it,hide,a){return !hide.id ? <td>{it.id}</td> : null},
function(it,hide,a){return !hide.category3 ? <td>{it.category3}</td> : null},
function(it,hide,a){return !hide.edit ? <td>
    <Button onClick={() => a.setState({edit:!a.state.edit,element:it})}>    
    </Button>
</td> : null}

что меня интересует, это a.setState({edit:!a.state.edit,element:it})}

Я рендерил другой компонент внутри первого

<Edit isOpen={this.state.edit} editBack={this.editBack} th={this} element={this.state.element}/>

Я передаю свой this.state.element в Edit, внутри компонента Edit я делаю что-то вроде этого:

elem = {};
componentDidUpdate(){
        this.elem = this.props.element
        console.log(this.elem)
    }
...
<Input onChange={ e => {this.elem.packagingType = e.target.value; console.log(e.target.value)} } ... />

Итак, проблема в следующем: я передаю this.state.element в компонент Edit, затем в компоненте Edit я создаю новую переменную elem и делаю ее равной this.props.elem Я передал

проблема, начинающаяся здесь, первая, (оригинальная, естественная) this.state.element меняется, но я не изменяю dataOld, я не изменяю любой элемент, который был представлен, я действительно не понимаю, как это работает здесь .

Мое предположение было об этом месте

<Edit isOpen={this.state.edit} editBack={this.editBack} th={this} element={this.state.element}/>

Я думаю, что когда я делаю element={this.state.element}, я как-то связываю эти 2 вещи, и когда я изменяю element внутри Edit, естественное this.state.element тоже меняется.

Пример Codesandbox: https://codesandbox.io/embed/7wk8689op6?fontsize=14

когда вы нажимаете кнопку возле каждой строки, затем меняете данные и нажимаете кнопку отмены, исходные данные меняются, я не понимаю, почему

Answer 1

Мне кажется, я понял вопрос. Когда я помещаю объект в компонент Edit, а затем изменяю объект внутри компонента, изменяется и исходный объект, поскольку я не создал новую версию этого объекта, но дал Edit ссылку на этот объект.