Question

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

谢谢！

Answer 1

想出来。与React儿童和解有关。在key={input.id}标记中添加了<Input>，但它确实有效。

此处有关于儿童对帐和动态儿童的更多信息。 http://facebook.github.io/react/docs/multiple-components.html

Reactjs无法正确呈现信息

1 个答案: