反应-阵列拼接故障

Question

学习反应。试图做我自己的小应用程序非常接近的基础上所做的:https://www.youtube.com/watch?v=-AbaV3nrw6E.

我有一个在我的应用程序中删除评论的问题。我已经在其他几个地方寻找有类似错误的人，但似乎问题是在我自己的代码(但我能找到没有错误)。我已经一遍又一遍地搜索Babel文件，但无济于事。

具体如下:创建新评论时，有两个按钮形式的选项:Save和Delete。在写完一条注释并按下"保存"后，删除函数就可以正常工作了。但是，如果总共有三条评论(例如)，并且您在第一条上单击"删除"，则下一条评论(在本例中是第二条评论)将被删除。

希望这对你有一定的意义。

你能找到我的错误吗?删除函数背后的数学/逻辑位于第71行，名为"deleteComment"。"

在这里充笔

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

您的问题源于使用索引作为键:

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

#键

当你从数组中删除一个项时，处于该状态的数组被正确更新。但是，当呈现数组时，除了少一个元素外，无论删除哪个元素，它们的键都是相同的。

此时，协调发生，组件被重新呈现。然而，在每个组件中都有一个(不受控制的)文本区，它拥有自己的内部状态。不受控制的textarea组件确实从children属性获得默认(初始)值，但不受该值更改的影响。因此，用text的新值重新呈现组件不会改变那些textarea实例中的值。

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

edit:笔中的代码略有变化，其中有两个不同的渲染分支(编辑，正常)。由于正常渲染不使用不受控制的文本区域输入，因此笔不再显示异常行为。

Answer 2

渲染CommentSection组件时使用this.props.children存在问题

更改代码以使用prop:

    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 3

Try with Array.filter。

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