javascript - .map() 函数并使用 ReactJS 从表中删除一行

Question

我在理解 .map() 函数时遇到了问题，因为它与 ReactJS 相关。实际上，我有一个可以在其中添加行的表，但是通过传递行索引来删除行是行不通的。这就是我所拥有的；谁能澄清我做错了什么？

import React from 'react';
import { render } from 'react-dom';

class CommentList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            comments: []
        };
        this.handleCommentDelete = this.handleCommentDelete.bind(this);
    }
    handleCommentDelete(i) {
        alert('i = ' + i);
        let comments = [...this.state.comments];
        comments.splice(i, 1);
        this.setState({
            comments: comments
        });
    }
    render() {
        return (
            <table className="commentList">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {
                        this.props.data.map((comment, i) => {
                            return (
                                <tr className="comment" key={i}>
                                    <td className="commentId">{comment.Id}</td>
                                    <td className="commentName">{comment.Name}</td>
                                    <td className="commentPhone">{comment.Phone}</td>
                                    <td className="commentEmail">{comment.Email}</td>
                                    <td className="commentCRUD">
                                        <a onClick={(i) => this.handleCommentDelete(i)}>
                                            <i className="fa fa-trash" />
                                        </a>
                                    </td>
                                </tr>
                            );
                        })
                    }
                </tbody>
            </table>
        );
    }
}

export default CommentList;

提前致谢!

Answer 1

您正在传递索引i，但方式不正确。另外，我更愿意传递id而不是index。以下是您可以执行此操作的方法:

import React from 'react';
import { render } from 'react-dom';

class CommentList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            comments: []
        };
        this.handleCommentDelete = this.handleCommentDelete.bind(this);
    }
    handleCommentDelete(id) {
        let comments = this.state.comments.filter(comment => comment.id !== id);
        this.setState({
            comments: comments
        });
    }
    render() {
        return (
            <table className="commentList">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {
                        this.props.data.map(comment => {
                            return (
                                <tr className="comment" key={comment.Id}>
                                    <td className="commentId">{comment.Id}</td>
                                    <td className="commentName">{comment.Name}</td>
                                    <td className="commentPhone">{comment.Phone}</td>
                                    <td className="commentEmail">{comment.Email}</td>
                                    <td className="commentCRUD">
                                        <a onClick={() => this.handleCommentDelete(comment.Id)}>
                                            <i className="fa fa-trash" />
                                        </a>
                                    </td>
                                </tr>
                            );
                        })
                    }
                </tbody>
            </table>
        );
    }
}

export default CommentList;

希望这对您有用。