移除项目后，状态数组正在解除绑定

Question

我是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.filter(a=>a.Id !== action.mobile.Id)

default: 
return state
}
}
export default counter

Answer 1

您需要像这样修复Reducer。删除项目时，需要将state保留在原始对象结构中，就像保存项目时一样。

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