4

我正在尝试实现一个可以使用 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
  });
},

实际的destroy函数是通过子组件调用的<a href="#" onClick={this.props.onDestroy}>(Remove)</a>。有趣的是，当我在控制台记录我的输入时，如在渲染函数中所见，正确的输入会显示出来——我调用破坏函数的那个​​已经消失了。但是不正确的输入被渲染了——它总是最后一个消失，而不是我调用破坏函数的那个​​。例如，我最初将记录：

First Name
Last Name
Email

并在姓氏上调用销毁函数。将console.log显示：

First Name
Email

但实际呈现的信息将显示：

First Name
Last Name

谢谢！

4

1 回答 1

1

弄清楚了。与 React 儿童和解有关。key={input.id}在<Input>标签中添加了一个，它可以工作。

在儿童和解和动态儿童下的更多信息。 http://facebook.github.io/react/docs/multiple-components.html

于 2014-01-13T20:45:51.593 回答