React-Native Redux Создать массив в массиве - PullRequest
Новая
       26

React-Native Redux Создать массив в массиве

0 голосов
/ 22 марта 2020

Основная проблема составляет около react-native redux / javascript в целом. Я хочу создать специальный вид «Todo-list», который означает, что есть родительские категории (в данном случае PackingLists), и каждая из них включает в себя name, two dates and the item array.

Это означает: Мы предполагаем, что у нас есть список «Упаковочных листов» (например, Мадрид, Париж и Берлин). Должна быть возможность добавить предметы к каждому из них (например, в Мадриде есть джинсы и рубашка, а в Париже - юбка и пара обуви). Идея, лежащая в основе результата, должна быть ясна сейчас!

Нет проблем при создании упаковочных листов. Я просто не знаю, как «добавить» / изменить «Список упаковки» и добавить / удалить элементы из массива в каждом списке с помощью response-redux (в PackingListReducer. js - проблема в add_ItemToPackingList). Вы можете мне помочь?

index. js (действия) 

export const addPackingList = (name, startDate, endDate, items) => ({
    type: 'add_PackingList',
    payload: {
      name,
      startDate,
      endDate,
      items
    }
});

export const addItemToPackingList = (parentItem, itemName, isDone) => ({
    type: 'add_ItemToPackingList',
    payload: {
      parentItem,
      itemName,
      isDone,
    }
});


export const removePackingList = (name) => ({
    type: 'remove_PackingList',
    payload: name
});

PackingListReducer. js

export default (state = [], action) => {
    switch (action.type) {
      case 'add_PackingList':
        return [...state, action.payload];

      case 'add_ItemToPackingList': {
        const currentList =
          state.filter(packingList => packingList.name === action.payload.parentItem);
          console.log(state);
          console.log(currentList);

        //return { ...state, items: [...currentList, action.payload] };
        return Object.assign(state, { items: [...currentList, action.payload] });
      }
      case 'remove_PackingList':
        return state.filter(packinglist => packinglist.name !== action.payload);
      default:
        return state;
    }
};

Здесь я создаю родительский "PackingList" , который отлично работает. 

    <TouchableOpacity
         onPress={() => {
           const exists = this.props.packingList.includes(
             this.props.packingList.find(item => item.name === this.state.text));
              console.log(endDate);
                if (!exists) {
                  this.props.addPackingList(this.state.text, startDate, endDate, []);
                  this.props.navigation.goBack();
                }
              }
            }
        >
              <Text style={styles.buttonStyle}>
                   CREATE NEW LIST!
              </Text>
          </TouchableOpacity>
      </View>

Создание «предмета», который должен быть добавлен в родительский упаковочный лист. 

    <TextInput
                style={styles.inputText}
                onSubmitEditing={() => {
                    this.props.addItemToPackingList(this.props.route.params.name,
                      this.state.text, false);
                }}
</TextInput>

1 Ответ

0 голосов
/ 22 марта 2020

Попробуйте это:

Отредактировано 

// PackingListReducer.js
const currentListIndex =
          state.findIndex(packingList => packingList.name === action.payload.parentItem);

let currentList = state[currentListIndex];
currentList = { ...currentList, items: [...currentList.items, action.payload] };

const newState = [...state];
newState[currentListIndex] = currentList;

...
return newState;

Обновлено

Чтобы удалить те же элементы, регистр редуктора будет выглядит так (учитывая тот факт, что вы отправляете itemName своему редуктору в полезной нагрузке): 

case 'remove_ItemFromPackingList': {
        const currentListIndex =
          state.findIndex(packingList => packingList.name === action.payload.parentItem);

        let currentList = state[currentListIndex];
        currentList = { ...currentList, items: currentList.items.filter(item => item.itemName !== action.payload.itemName) };

        const newState = [...state];
        newState[currentListIndex] = currentList;

        return newState;
    }
...