Удалить элемент из объекта массивов

У меня есть приложение для реагирования, использующее Redux. Прямо сейчас у меня есть список книг, показываемых с помощью 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>
            );
        })
    }

И это прекрасно. Действие deleteBook имеет следующее действие:

export function deleteBook (book, id) {
    book = book.filter(function(book){
        return book.id !== id 
    });
    console.info(book.id);
    return {
        type: "BOOK_DELETED",
        payload: 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
        }
    ]    
}

какова структура книг, не уверен, что вы имеете в виду под объектом массивов

Shubham Khatri 16.03.2018 18:38

Согласитесь с Шубхамом выше, каково первоначальное состояние книг? Какова его структура данных?

Joshua Underwood 16.03.2018 18:40

Добавлен новый код @ShubhamKhatri

William 16.03.2018 18:47

Действие не должно изменять книгу. Вы должны написать редуктор, который сделает это, когда получит действие в качестве аргумента

Patrick Hund 16.03.2018 18:48
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
64
1

Ответы 1

Ваши книги - это массив объектов для одного, а не объект массивов

Во-вторых, вы должны отфильтровать книгу для удаления в редукторе, а не в действии, и, следовательно, ваш редуктор будет выглядеть как

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>
        );
    })
}

Другие вопросы по теме