我正在使用 React/Redux 制作購物清單應用程式。我正在從串列中洗掉一個專案。執行“removeItem”操作后，頁面無法再讀取作為串列的物件（之前存盤在本地狀態中，可以在執行操作之前讀取）。
我嘗試使用 useEffect 鉤子將串列物件存盤在 const 變數和本地狀態中，但它仍然中斷。
JSX
const { id } = useParams();
const shoppingLists = useSelector((state) => state.shoppingLists);
const findList = shoppingLists.find((list) => list.listId === id);
const [selectedList, setSelectedList] = useState({});
useEffect(() => {
setSelectedList(findList);
});
const removeItemForm = (item) => {
const { itemName, itemId } = item;
dispatch(removeItem({ itemName, itemId, listId: id }));
};
<div className="listHeading mb-4">
<h2>{selectedList.listName}</h2> //Line that breaks
</div>
減速器
const shoppingListsSlice = createSlice({
name: "shoppingLists",
initialState: [],
reducers: {
createList(state, action) {
state.push({
listId: uuidv4(),
listName: action.payload,
items: [],
color: "",
createdAt: Date(),
});
addItem(state, action) {
state
.find((list) => list.listId === action.payload.listId)
.items.push({
itemId: uuidv4(),
itemName: action.payload.itemName,
isBought: false,
});
},
removeItem(state, action) {
return state
.find((list) => list.listId === action.payload.listId)
.items.filter((item) => item.itemId !== action.payload.itemId);
},
uj5u.com熱心網友回復：
你的問題是你的removeItem減速器。無論你從減速器回傳什么都將成為新的狀態值。在這種情況下，您將回傳一個items從特定購物串列物件中過濾的陣列，這不是您想要將狀態設定為的，因為它實際上應該仍然是一個串列陣列，而不是專案。發生這種情況時，shoppingLists將改為參考您的items陣列，這將導致.find()to 設定findList為undefined. 由于 redux-toolkit 使用 immer，你可以在你的 reducer 中進行可變更新以使事情更容易閱讀：
removeItem(state, action) {
const list = state.find((list) => list.listId === action.payload.listId);
list.items = list.items.filter((item) => item.itemId !== action.payload.itemId);
}
不可變的方法是.map()您的購物清單狀態并回傳一個新的串列物件，其中包含一個過濾items陣列：
removeItem(state, action) {
return state.map((list) => list.listId === action.payload.listId
? {...list, items: list.items.filter((item) => item.itemId !== action.payload.itemId)}
: list
);
}
uj5u.com熱心網友回復：
如果只是想從購物車中洗掉商品，那么您的串列狀態 id 和當前商品 id 過濾器資料再次存盤到狀態中就是這樣。你發現 index 首先直接應用 filter 方法。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/493753.html
標籤：javascript 反应 列表 反应还原