Javascript React Redux：如何从数组中添加每个项

我当前执行的调度

我曾尝试通过映射来分派项，但有时候Redux会给出一个未定义的错误，所以我想在reducer中尝试一种更好的方法

const dispatch = useDispatch()
const mapCheck =  [
    "Math",
    "Spanish",
    "Clean garden",
]

mapCheck.map(c=>dispatch(createCustomList(c.val)))

我想做的事

我试图从一个数组中获取要分派的每个单独的项，但是我得到了这个输出 我有一个待办事项列表，其中我分派了一个数组，如下所示：

我的减速机

import { CUSTOM_LIST } from "../actions/shoppingList";

const initialState = { 
    myCustomItems: []
};

const ToDoReducer = (state = initialState, action) => {
    switch (action.type) {
        case CUSTOM_LIST:
            const customList = { id: Date.now(),val: action.custom.custom};

            const custom = state.myCustomItems.concat(customList);

            const existingCustomItem = state.myCustomItems.findIndex(
                item => item.val === action.custom.custom
            );
            if (existingCustomItem >= 0) {
                return {...state, myCustomItems: state.myCustomItems}
            } else {
                return {...state,myCustomItems: custom};
            }
        default:
            return state;
    }
};

export default ToDoReducer;

所需输出

如何映射每个项目，并将其添加到所需输出中的id，如下所示。不要担心id只是

Date.now（）

期望输出：

const DesiredOutput = [{
        "id": "qm6a67ci",
        "val": "Math",
    },
    {
        "id": "qm6a62ci",
        "val": "Spanish",
    },
    {
        "id": "rkrkmroepe",
        "val": "Clean garden",
    }
]

---

请使用下面的代码。希望它能解决你的问题

import { CUSTOM_LIST } from "../actions/shoppingList";

const initialState = { 
    myCustomItems: []
};

const ToDoReducer = (state = initialState, action) => {
    switch (action.type) {
        case CUSTOM_LIST:
            const customList = { id: Date.now(),val: action.custom.custom};

            const existingCustomItem = state.myCustomItems.findIndex(
                item => item.val === action.custom.custom
            );
            if (existingCustomItem > -1) {
                return {...state, myCustomItems: state.myCustomItems}
            } else {
                return {...state,myCustomItems: [...state.myCustomItems,customList ]};
            }
        default:
            return state;
    }
};

export default ToDoReducer;

或者，第二种方法是，您可以调度单个操作，而不是调度多个操作

下面的代码将从数组中删除重复项，这样您就不必在减速机中设置条件

const dispatch = useDispatch()
const mapCheck =  [
    "Math",
    "Spanish",
    "Clean garden",
]

dispatch(createCustomList[...new Set(mapCheck)]))

减速器锉

import { CUSTOM_LIST } from "../actions/shoppingList";

const initialState = {
  myCustomItems: [],
};

const ToDoReducer = (state = initialState, action) => {
  switch (action.type) {
    case CUSTOM_LIST:
      return {
        ...state,
        myCustomItems: action.customList.map((val) => ({
          id: Date.now(),
          val,
        })),
      };

    default:
      return state;
  }
};

export default ToDoReducer;

---

这是您的问题：如何从mapCheck数组中获取DesiredOutput数组？不，我的问题是从reducer本身映射数组中的每个项，而不是在分派时进行映射