我正在尝试使用React实现一个表单，可以删除特定的输入内容。但问题是，React似乎无法正确渲染信息。这是我的渲染函数：
render: function(){
var inputItems;
if (this.state.inputs){
inputItems = this.state.inputs.map(function(input){
console.log(input)
return (
<Input
input={input}
onDestroy={this.destroy.bind(this, input)}
onEdit={this.edit.bind(this, input)}
editing={this.state.editing === input.id}
onCancel={this.cancel} />
);
}, this);
}
(...)
// this isn't the actual render return
return {inputItems}
我的销毁函数：
destroy: function (input) {
var newInputs = this.state.inputs.filter(function (candidate) {
return candidate.id !== input.id;
});
this.setState({
inputs: newInputs
});
},
实际的销毁函数是通过子组件调用的
<a href="#" onClick={this.props.onDestroy}>(Remove)</a>。有趣的是，当我在呈现函数中记录输入时，显示了正确的输入 - 我调用销毁函数的那个已经被删除了。但是错误的输入被渲染 - 总是最后一个消失，而不是我调用销毁函数的那个消失。例如，我最初会记录：First Name
Last Name
Email
并在姓氏上调用destroy函数。 console.log 将显示：
First Name
Email
但实际呈现的信息将会显示为：
First Name
Last Name
谢谢！