Question

学习反应。试图根据这里所做的事情非常密切地制作我自己的迷你应用程序：https://www.youtube.com/watch?v=-AbaV3nrw6E。

我在删除应用中的评论时遇到问题。我在其他几个地方看过有类似错误的人，但似乎问题出在我自己的代码中（但我找不到任何错误）。我一遍又一遍地搜索巴贝尔文件，但无济于事。

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

希望这有点意义。

你能找到我的错误吗？删除功能背后的数学/逻辑位于第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#keys

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

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

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

编辑：笔中的代码稍有变化，有两个不同的渲染分支（编辑，正常）。由于正常渲染不使用不受控制的textarea输入，因此笔不再表现出异常行为。

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

在渲染 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

React - Array Splice Trouble

3 个答案: