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}时，我会以某种方式将这两件事联系起来，而当我在element内更改Edit时，自然的this.state.element也正在发生变化。

Codesandbox示例： https://codesandbox.io/embed/7wk8689op6?fontsize=14

当您按每行附近的按钮，然后更改数据并按“取消”时，原始数据正在更改，我不明白为什么

Answer 1

我想我明白这个问题。当我将一个对象放到Edit组件中，然后在组件内部更改一个对象时，原始对象也在更改，因为我没有对该对象进行新版本的制作，但我将其交给了{{1} }指向该对象的链接。

从React中的组件传输数据

1 个答案: