反应 - 阵列拼接故障

Question

学习反应。试图制作我自己的迷你应用程序，它基于这里完成的工作：https://www.youtube.com/watch?v=-AbaV3nrw6E。

我遇到了在我的应用中删除评论的问题。我曾在其他几个地方看过类似错误的人，但看起来问题出在我自己的代码中（但我没有发现任何错误）。我一遍又一遍地浏览了Babel文件，但无济于事。

以下是具体内容： 当您创建新评论时，您有两个按钮形式的选项：保存和删除。在写完一条评论并按下“保存”后，删除功能就可以正常工作。但是，如果总共有三条评论（例如），并且您在第一条评论上点击“删除”，则会删除下一条评论（本例中的第二条评论）。

希望这可以使一些感觉。

你能找到我的错误吗？删除功能后的数学/逻辑位于第71行，名称为“deleteComment”。

完全笔here.

var CommentSection = React.createClass({ 

    getInitialState: function() { 
     return {editing: true} 
    }, 

    edit: function() { 
     this.setState({editing: true}); 
    }, 

    save: function() { 
     this.props.updateCommentText(this.refs.newText.value, this.props.index); 
     this.setState({editing: false}); 
    }, 

    delete: function() { 
     this.props.deleteFromCard(this.props.index); 
    }, 

    renderNormal: function() { 
     return (
      <div className="comment-section"> 
       <div className="comment-content">{this.props.children}</div> 
       <a className="-edit" onClick={this.edit}>Edit</a> 
      </div> 
     ); 
    }, 

    renderEdit: function() { 
     return (
      <div className="comment-section"> 
       <textarea ref="newText" defaultValue={this.props.children}></textarea> 
       <button className="-save" onClick={this.save}>Save</button> 
       <button className="-delete" onClick={this.delete}>Delete</button> 
      </div> 
     ); 
    }, 

    render: function() { 
     if(this.state.editing) { 
      return this.renderEdit(); 
     } else { 
      return this.renderNormal(); 
     } 
    } 

}); 

var PhotoSection = React.createClass({ 

    render: function() { 
     return <div className="photo-section"></div>; 
    } 

}); 

var Desk = React.createClass({ 

    getInitialState: function() { 
     return { 
      comments: [] 
     } 
    }, 

    addComment: function(text) { 
     var arr = this.state.comments; 
     arr.push(text); 
     this.setState({comments: arr}) 
    }, 

    deleteComment: function(i) { 
     console.log(i); 
     var arr = this.state.comments; 
     arr.splice(i, 1); 
     this.setState({comments: arr}) 
    }, 

    updateComment: function(newText, i) { 
     var arr = this.state.comments; 
     arr[i] = newText; 
     this.setState({comments: arr}) 
    }, 

    commentFormat: function(text, i) { 
     return (
      <CommentSection key={i} index={i} updateCommentText={this.updateComment} deleteFromCard={this.deleteComment}> 
       {text} 
      </CommentSection> 
     ); 
    }, 

    render: function() { 
     return (
      <div className="desk"> 
       <div className="card"> 
        <PhotoSection /> 
        <div className="comment-section-backing"> 
         <button className="-comment" onClick={this.addComment.bind(null, "")}>Leave a Comment</button> 
         {this.state.comments.map(this.commentFormat)} 
        </div> 
       </div> 
      </div> 
     ); 
    } 

}); 

ReactDOM.render(<Desk />, document.getElementById('app')); 

Answer 1

有与渲染CommentSection组件

当更改代码中使用的道具使用this.props.children一个问题：

return (
     <div className="comment-section"> 
     <div className="comment-content">{this.props.commentText}</div> 
     <a className="-edit" onClick={this.edit}>Edit</a> 
     <button className="-delete" onClick={this.delete}>Delete</button> 
     </div> 
    ); 

，并在commentFormat设置此在容器中的功能：

commentFormat: function(text, i) { 
    return (
    <CommentSection 
     key={i} 
     index={i} 
     updateCommentText={this.updateComment}  
     deleteFromCard={this.deleteComment} 
     commentText={text}> 
    </CommentSection> 
     ); 
} 

似乎工作。

CodePen

Answer 2

尝试用Array.filter。

deleteComment: function(i) { 
    var arr = this.state.comments.filter(function(comment) { 
     return comment.index !== i; 
    }); 
    this.setState({comments: arr}); 
}, 

Answer 3

您的问题，从使用索引键茎：

https://facebook.github.io/react/docs/lists-and-keys.html#keys

当你删除你的数组中的项，在状态阵列正确更新。但是，当数组呈现时，无论删除哪个元素，它们的键都将相同，除了少一个元素。

此时reconciliation发生并且您的组件被重新渲染。但是，每个组件中都有一个（不受控制的）textarea，它们拥有自己的内部状态。不受控制的textarea组件确实从children prop获得它的默认（初始）值，但是不受该值的更改影响。因此，使用text的新值对组件重新渲染不会更改这些textarea实例中的值。

如果映射组件中组件的键未链接到索引，则将删除正确的组件。

编辑：在有两个不同渲染分支（编辑，正常）的地方，笔中的代码略有变化。由于正常渲染不使用不受控制的textarea输入，笔不再显示异常行为。