Javascript 从数组的对象中删除项

我有一个使用Redux的react应用程序。现在，我有一个用redux显示的书籍列表，我想在其中实现CRUD。列出这些书籍的代码是：

listBooks(){
        return this.props.books.map((books) => {
            return(
                <tbody key={books.title}>
                    <tr className="tr-book">
                        <td>{books.series}</td>
                        <td>{books.title}</td>
                        <td>Vol. {books.volume}</td>
                        <td>
                            <button onClick={() => deleteBook(this.props.books, books.id)}className="btn-action">Delete</button>
                            <button onClick={() => editBook(this.props.books)}className="btn-action">Update</button>
                        </td>
                    </tr>
                </tbody>
            );
        })
    }

但它不起作用。我尝试过一些方法，但大多数都不起作用，因为book不是数组，而是数组的对象。在这种情况下，我如何告诉函数

deleteBook

过滤这些书籍并只返回那些

book.id！==id

更新：这里是书籍设置的地方：

export default function listBooks() {
    return[
        {
            id: 1,
            volume: 1,
            series: 'A Song of Ice and Fire',
            title: 'Game of Thrones',
            rank: 0
        },
        {
            id: 2,
            volume: 2,
            series: 'A Song of Ice and Fire',
            title: 'Clash of Kings',
            rank: 0
        },
        {
            id: 3,
            volume: 3,
            series: 'A Song of Ice and Fire',
            title: 'Storm of Swords',
            rank: 0
        },
        {
            id: 4,
            volume: 4,
            series: 'A Song of Ice and Fire',
            title: 'A Feast of Crows',
            rank: 0
        }, {
            id: 5,
            volume: 5,
            series: 'A Song of Ice and Fire',
            title: 'A Dance With Dragons',
            rank: 0
        }, {
            id: 6,
            volume: 1,
            series: 'The Lord of the Rings',
            title: 'The Fellowship of the Ring',
            rank: 0
        }, {
            id: 7,
            volume: 2,
            series: 'The Lord of the Rings',
            title: 'The Two Towers',
            rank: 0
        }, {
            id: 8,
            volume: 3,
            series: 'The Lord of the Rings',
            title: 'The Return of the King',
            rank: 0
        }
    ]    
}

---

您的书籍是一个对象数组，而不是数组对象

第二，您必须在reducer中过滤要删除的书籍，而不是action，因此您的reducer看起来像

export function booksReducer (state = initialState, action) {

    switch(action.type) {
       ...
       case 'DELETE_BOOK': return state.filter(function(book){
          return book.id !== action.id 
       });
       ...
    }
}

你的行动将是

export function deleteBook (id) {

    return {
        type: "DELETE_BOOK",
        payload: id
    }
}

把行动称为

listBooks(){
    return this.props.books.map((books) => {
        return(
            <tbody key={books.title}>
                <tr className="tr-book">
                    <td>{books.series}</td>
                    <td>{books.title}</td>
                    <td>Vol. {books.volume}</td>
                    <td>
                        <button onClick={() => deleteBook(books.id)}className="btn-action">Delete</button>
                        <button onClick={() => editBook(this.props.books)}className="btn-action">Update</button>
                    </td>
                </tr>
            </tbody>
        );
    })
}

listBooks（）{
返回此.props.books.map（（books）=>{
返回(
{books.series}
{books.title}
卷{图书卷}
deleteBook（books.id）}className=“btn操作”>删除
editBook（this.props.books）}className=“btn操作”>更新
);
})
}

书籍的结构是什么，不确定你所说的arraysAgree与上面的Shubham是什么意思，书籍的初始状态是什么？它的数据结构是什么？添加了一些新代码@shubhamkhattri该操作不应该修改这本书。当它将动作作为参数时，必须编写一个这样做的减缩器

listBooks(){
    return this.props.books.map((books) => {
        return(
            <tbody key={books.title}>
                <tr className="tr-book">
                    <td>{books.series}</td>
                    <td>{books.title}</td>
                    <td>Vol. {books.volume}</td>
                    <td>
                        <button onClick={() => deleteBook(books.id)}className="btn-action">Delete</button>
                        <button onClick={() => editBook(this.props.books)}className="btn-action">Update</button>
                    </td>
                </tr>
            </tbody>
        );
    })
}