学习React尝试根据此处所做的操作非常紧密地制作自己的微型应用程序: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'));

最佳答案

呈现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

关于javascript - react -阵列拼接故障,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40543609/

10-14 14:51
查看更多