0

Создаю to do приложение на React, Необходимо создать карточку в списке. Не понимаю как добавить новую карточку, а не обновить текущу. Получается такая структура, но мне нужно чтобы в listItem создавались отдельные обьекты под каждый cardName Получается такая структура, но мне нужно чтобы в listItem создавались отдельные обьекты под каждый cardName

введите сюда описание изображения Мой reducer выглядит таким образом. Подскажите что я делаю не так, застрял на этом моменте. Буду очень благодарен за подсказку

case 'CREATE_CARD': {
        return {
            ...state,
            boardItem: state.boardItem.map((item, index) => {
                if (item.id === action.payload.boardIndex) {
                    return {
                        ...item,
                        list: item.list.map((listArray) => {
                            if (listArray.listId === action.payload.listId) {
                                console.log(listArray)
                                return {
                                    ...listArray,
                                    listItem: listArray.listItem.map((card) => {
                                        console.log(card)
                                        return {
                                            ...card,
                                            cardName: [...card.cardName, action.payload.cardName]
                                        }
                                    })
                                }
                            }
                            return listArray;
                        })
                    }
                }
                return item;
            })
        }
    }

2 ответа 2

1

Список карточек должен быть массивом. Для добавления карточки добавляем элемент в массив:

case 'CREATE_CARD':             
   const newItem = {         
     id: payload.id,
     title: payload.title,
   };
return [...state, newItem];

Вот пример to-do-app с использованием React-Redux: https://github.com/KonstantinModin/react-t/tree/master/src/components/Todo

3
  • Как видите у меня более сложная структура, поэтому и возник вопрос, можете ли вы подкорректировать под мою структуру?
    – yavis
    4 окт 2021 в 13:52
  • Для карточек можно создать отдельный Reducer который будет возвращать массив. Логику вашей структуры сложно понять, где должен быть список карточек? 4 окт 2021 в 13:59
  • Спасибо, вы натолкнули меня на правильное решение, все получилось)
    – yavis
    4 окт 2021 в 14:10
0

Если кто-то столкнется с такой же проблемой, вот решение которое помогло мне

case 'CREATE_CARD': {
        return {
            ...state,
            boardItem: state.boardItem.map((item, index) => {
                if (item.id === action.payload.boardIndex) {
                    return {
                        ...item,
                        list: item.list.map((listArray) => {
                            if (listArray.listId === action.payload.listId) {
                                let newCardName = {
                                    cardName: action.payload.cardName
                                }
                                return {
                                    ...listArray,
                                    listItem: [...listArray.listItem, newCardName]
                                }
                            }
                            return listArray;
                        })
                    }
                }
                return item;
            })
        }
    }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.