无法使用 useContext 和 useReducer 删除项目

Question

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

使用上下文和使用Reducer

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

import React, { useContext, useState } from "react";
import { ItemContext } from "../Context/ItemContext";

const Test2 = () => {
  const { items } = useContext(ItemContext);

  const { addItem } = useContext(ItemContext);

  const { delItem } = useContext(ItemContext);

  const [name, setName] = useState("");

  const [price, setPrice] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    const newItem = {
      id: items.length + 1,
      name: name,
      price: price,
    };

    addItem(newItem);

    setName("");
    setPrice("");

    console.log(newItem);
  };

  const handleDelete = (id) => {
    delItem(id);
  };

  return (
    <div>
      <div>
        <form>
          <label>Product Name:</label>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
          <label>Product Price:</label>
          <input
            type="text"
            value={price}
            onChange={(e) => setPrice(e.target.value)}
          />
          <button onClick={handleSubmit}>Submit</button>
        </form>
      </div>
      <div>
        {items.map((item) => (
          <div key={item.id}>
            <li>
              <p>{item.name}</p>
              <p>{item.price}</p>
            </li>
            <button onClick={() => handleDelete(item.id)}>X</button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Test2;

Answer 1

Array.filter() 已经 returns 一个新数组，所以当你将它放入 [] 时，你正在创建一个数组，其中包含一个数组作为第一个项目元素.

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

因此是正确的。

无法使用 useContext 和 useReducer 删除项目

Can't delete an item using useContext and useReducer

reactjs

use-reducer

use-context