React-Redux：如何从数组中添加每个项目答案

【问题标题】：React-Redux: How to add each item from arrayReact-Redux：如何从数组中添加每个项目
【发布时间】：2020-10-20 23:32:49
【问题描述】：

我当前的调度实现

我尝试通过映射来调度项目，但有时 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。不用担心只是Date.now()的id

想要的输出：

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

【问题讨论】：

你的问题是：如何从 mapCheck 数组中获取 DesiredOutput 数组？
不，我的问题是从reducer本身映射数组中的每个项目的更好方法，而不是在调度时这样做

标签： javascript reactjs redux react-redux

【解决方案1】：

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

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;

【讨论】：