Question

请大家帮忙。所以我开始学习 useReducer 和 useContext 并且我一直在删除一个对象。我试图在控制台中记录结果，并打印出我想要的预期数组。但是，当我从减速器返回数组时，每当我删除一个对象时，它都会清除数组并留下按钮。所以我在下面有这 2 个 js 文件。

useContext & useReducer

import spark.implicits.StringToColumn

import { createContext, useReducer } from "react";

const initialState = {
  items: [],
};

const reducer = (state, action) => {
  switch (action.type) {
    case "ADD_ITEM":
      return { ...state, items: [action.payload, ...state.items] };
    case "DEL_ITEM":
      return {
        ...state,
        items: [state.items.filter((item) => item.id !== action.payload)],
      };
    default:
      return state;
  }
};

export const ItemContext = createContext(initialState);

export const ItemProvider = (props) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const addItem = (item) => {
    dispatch({ type: "ADD_ITEM", payload: item });
  };

  const delItem = (id) => {
    dispatch({ type: "DEL_ITEM", payload: id });
  };

  return (
    <ItemContext.Provider value={{ items: state.items, addItem, delItem }}>
      {props.children}
    </ItemContext.Provider>
  );
};

Answer 1

Array.filter() 已经返回一个新数组，因此当您将其放入 [] 时，您正在创建一个数组，其中包含一个数组作为您的第一个元素。

case "DEL_ITEM":
      return {
        ...state,
        items: state.items.filter((item) => item.id !== action.payload),
      };

因此是正确的。

无法使用 useContext 和 useReducer 删除项目

1 个答案: