React Component Delete不反映在render方法中

Question

我正在尝试使用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>
    );
}

添加和删除重复组件的代码如下：

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;
}

但我面临的一个奇怪的行为是假设我们添加了4个联系人组件，即：A，B，C，D，因为我们正在从数组中删除索引，所以我们在console.log中删除了B.看到数组的剩余值，它显示A，C，D，但在UI中，我看到最后一个元素被删除，即剩下A，B，C。

我尝试了一切但却无法理解这种奇怪的行为。我需要专家的帮助。