Reactjs React组件删除不反映在渲染方法中

我尝试使用ReactJs添加重复的组件，同时删除组件并呈现结果。虽然这样做的结果似乎相当混乱，我可能需要专家的帮助，所以请帮助我理解和解决这个问题

让我分享我的代码：

render() {
const contactComponentList = this.props.transportOperator.contacts.map((object, index) => {
     return (
            <div key={index} ref={"contact_"+index}>
                <MuiThemeProvider muiTheme={muiThemebtn}>
                    <Paper key={index} rounded={false} style={material.addWidgetStyle.paperStyle} zDepth={0}>
                        <div style={material.addWidgetStyle.rowStyle}>
                            <span style={material.addWidgetStyle.titleColumnStyle}>
                                {language.AddTransportText.TransportContactName}*
                            </span>
                            <span style={material.addWidgetStyle.greySpanStyle}>

                                <TextField
                                    id={"name" + index}
                                    ref="name"
                                    hintText={language.AddTransportText.TransportContactName}
                                    type="text"
                                    min="0"
                                    onChange={this.handleTransportOpContactName.bind(this, index)}
                                    underlineStyle={errorTxtName !== '' || errorValName !== '' ? { borderColor: 'red' } : {}}
                                    />
                                <IconButton style={errorTxtName !== '' || errorValName !== '' ? styles.showWarining : styles.hideWarning} 
                                    tooltip={errorTxtName !== '' ? errorTxtName : errorValName}>
                                    <Warning color="red" />
                                </IconButton>
                            </span>
                        </div>
                        <div style={material.addWidgetStyle.rowStyle}>
                            <span style={material.addWidgetStyle.titleColumnStyle}>

                            </span>
                            <span>
                            {index >= 1 ?
                            <IconButton style={styles.leftBtn} iconStyle={styles.leftIcon}
                                tooltip={language.AddDriverText.DeleteTransportOpContact}
                                onClick={this.deleteContactComponent.bind(this,index)}>
                                <ActionDelete color={grey700} />
                            </IconButton>
                            : ''
                            }
                            {(this.props.transportOperator.contacts.length-1 === index) ? 
                            <IconButton 
                                style={styles.leftBtn} iconStyle={styles.leftIcon}
                                tooltip={language.AddDriverText.AddTransportOpContact}
                                onClick={this.addContactComponent}>
                                <ContentAdd color={grey700} />
                            </IconButton>
                            : ''
                            }
                            </span>
                        </div>
                    </Paper>
                </MuiThemeProvider>
            </div>
        )
    });

    return (
        <MuiThemeProvider>
            <div>
                {contactComponentList}
            </div>
        </MuiThemeProvider>
    );
}

但我面临的一个奇怪的行为是，假设我们添加了4个联系人组件，即：a、B、C、D，当我们从数组中按索引删除时，我们删除了B。在console.log中，我看到数组的剩余值，它显示a、C、D在那里，但在UI中，我看到最后一个元素被删除，即a、B、C仍然存在

---

我尝试了一切，但无法理解这种奇怪的行为。请向我提供专家帮助。

尝试在每个联系人中使用唯一的键，而不是在根联系人div中使用索引。如果您有联系人姓名或类似的名称，它将很好地工作：

我认为您指的是具有现有键的整个父元素，该键对于组件来说不是唯一的，这就是状态更改时的原因也会影响它的其他部分。嗨@Ozan和@Amid:很抱歉我编辑了我的代码。请看一看。实际上，我正在迭代包含整个

部分的

contactComponentList

。因此，当我通过

addContactComponent

方法推送组件时，我会将其添加到

contactComponentList

中，这样每次索引都会更新。即使我这样做了，问题仍然存在：（您可以进行以下简单更改。在每个联系人对象中添加一个名为

uid

的字段，并用一些唯一的字符串填充它（以guid为例：）。然后将创建

contactComponentList

的代码更改为

@Amid:我尝试过这样做，但在本例中输入的值正在重置。假设我添加了三个组件，div key按照您的建议生成，但当我从A、B、C删除B中删除一个假设时，UI显示空白，我应该在e中保留A、C交叉部件。

addContactComponent(event) {
    tempArray = this.props.transportOperator.contacts;
    tempArray.push({
        'name': '',
    });
    this.props.error.push({
        'errorName': '',
    });
    contacts=tempArray;
    this.setState({ contactComponents: tempArray });
    this.props.transportOperator.contacts=contacts;
    event.currentTarget.style.display = 'none';
}

deleteContactComponent(index,event){
    tempArray.splice(index,1);
    contacts=tempArray;
    this.setState({
        contactComponents: tempArray
    });
    this.props.transportOperator.contacts=contacts;
}