React-Native Redux 在數組中創建數組

Question

主要問題是關於react-native redux /javascript。 我想創建一種特殊的“待辦事項列表”，這意味着有父類別（在本例中為PackingLists ），每個類別都包含一個name, two dates and the item array 。

這意味着：我們假設我們有一個“Packinglists”列表（例如馬德里、巴黎和柏林）。 應該可以為它們中的每一個添加項目（例如，馬德里包含牛仔褲和襯衫，巴黎包含一條裙子和一雙鞋子）。 結果背后的想法現在應該很清楚了！

Packinglists 的創建沒有問題。 我只是不知道如何使用 react-redux（在 PackingListReducer.js 中 - 問題出在add_ItemToPackingList ）“附加”/修改“Packinglist”並從每個列表中的數組中添加/刪除項目。 你能幫助我嗎？

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>

Answer 1

嘗試這個：

已編輯

// 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;

更新

要刪除相同的項目，reducer case 將如下所示（考慮到您在有效負載中將itemName發送到您的 reducer）：

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