反應 - 陣列拼接故障

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輸入，筆不再顯示異常行爲。