无法使用 useContext 和 useReducer 删除项目答案

【问题标题】：Can't delete an item using useContext and useReducer无法使用 useContext 和 useReducer 删除项目
【发布时间】：2021-06-07 11:20:47
【问题描述】：

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

useContext 和 useReducer

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;

【问题讨论】：

我想我发现了错误：Reducer 中的 items: state.items.filter((item) => item.id !== action.payload), 而不是 items: [state.items.filter((item) => item.id !== action.payload)], 可以工作吗？
@Taxel 兄弟成功了！我真的很感谢你的回复！我可以知道你为什么不需要在数组中吗？

标签： reactjs use-context use-reducer

【解决方案1】：

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

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

因此是正确的。

【讨论】：