Reactjs 删除项后状态数组正在取消查找

我是React新手，目前正在处理React Redux应用程序，我想删除处于Redux状态的数组中的项。删除后，一项（移动）列表在UseSelector中显示为未定义

const mobileList = useSelector((state) => state.MobileReducer.mobileList);

由于该映射不起作用，因为列表未定义，但在我收到错误后，我从Redux开发工具检查了状态，它在列表中显示了数组，没有删除的项，该代码在添加项时工作正常，状态更新，列表也显示了最新的项

列表组件

import React, { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import Table from "react-bootstrap/Table";
import Button from "react-bootstrap/Button";
import allActions from "../Actions/index";
import EditModal from "./EditModal";

const MobileList = () => {
  const dispatch = useDispatch();
  debugger;
  const mobileList = useSelector((state) => state.MobileReducer.mobileList);
  const [modalShow, setModalShow] = useState(false);
  const editingItem = useSelector((state) => state.editingItem);
  const [editItem, setEditItem] = useState(false);

  useEffect(() => {
    if(editItem){
      setModalShow(true);
    }else{
      setModalShow(false);
    }
    
  }, [editItem]);

  return (
    <>
      <h1>Available Mobiles</h1>
      <Table responsive>
        <thead>
          <tr>
            <th>Model Name</th>
            <th>Brand Name</th>
            <th>Year</th>
            <th>Price</th>
            <th>Edit</th>
            <th>Delete</th>
          </tr>
        </thead>
        <tbody>
          {mobileList.map((item, i) => {
            return [
              <tr key={i}>
                <td>{item.ModelName}</td>
                <td>{item.Brand}</td>
                <td>{item.Year}</td>
                <td>{item.Price}</td>
                <td>
                  <Button variant="info" onClick={() => setEditItem(item)}>
                    Edit
                  </Button>
                </td>
                <td>
                  <Button
                    variant="danger"
                    onClick={() =>
                      dispatch(allActions.MobileActions.deleteItem(item))
                    }
                  >
                    Delete
                  </Button>{" "}
                </td>
              </tr>,
            ];
          })}
        </tbody>
      </Table>
      {modalShow ? (
        <EditModal
          show={modalShow}
          onHide={() => setModalShow(false)}
          item={editItem}
          onClean={() => setEditItem(null)}
        />
      ) : null}
    </>
  );
};

export default MobileList;

---

你需要像这样修理减速器。删除项目时，需要保持原始对象结构中的

状态

，就像保存项目时一样

const initialMobileListState = {
    mobileList:[],
    editingItem:null
}


const counter = (state = initialMobileListState, action) => {
    debugger;
    switch(action.type){
        case "SAVE":
            return {
                ...state,
                mobileList:[...state.mobileList, action.mobile]
            }
        case "EDIT":
            return {
                ...state,
                editingItem:[action.mobile]
            }
        case "DELETE":  // <--------------------------------
            return {
                ...state,
                mobileList: state.mobileList.filter(a=>a.Id !== action.mobile.Id)
            }
        default: 
            return state
    }
}

export default counter

const initialMobileListState={
移动列表：[]，
编辑项：空
}
常量计数器=（状态=initialMobileListState，操作）=>{
调试器；
开关（动作类型）{
案例“保存”：
返回{
……国家，
mobileList:[…state.mobileList，action.mobile]
}
案例“编辑”：
返回{
……国家，
编辑项：[action.mobile]
}
案例“DELETE”：//a.Id！==action.mobile.Id）
}
违约：
返回状态
}
}
导出默认计数器

const initialMobileListState = {
    mobileList:[],
    editingItem:null
}


const counter = (state = initialMobileListState, action) => {
    debugger;
    switch(action.type){
        case "SAVE":
            return {
                ...state,
                mobileList:[...state.mobileList, action.mobile]
            }
        case "EDIT":
            return {
                ...state,
                editingItem:[action.mobile]
            }
        case "DELETE":  // <--------------------------------
            return {
                ...state,
                mobileList: state.mobileList.filter(a=>a.Id !== action.mobile.Id)
            }
        default: 
            return state
    }
}

export default counter