單擊“贊”按鈕時，我想將“喜歡的書”設定為“真”，然后將其放入名為“喜歡的書”的變數中。
但是現在在我的代碼中，它不會立即添加。
case ADD_TO_LIST :
return {
...state,
books: state.books.concat({
title: action.item.title,
contents: action.item.contents,
thumbnail: action.item.thumbnail,
liked: false
}),
};
case LIKED :
return {
...state,
books : state.books.map((book) => book.title === action.item.title ? {...book, liked: true} : book),
likedBook : state.books.filter(((book)=> book.liked === true))
}
export interface Book{
title : String,
contents: String,
thumbnail: String,
liked: boolean
}
const initialState : {books: Book[]; likedBook: Book[];}= {
books : [],
likedBook: []
};
在此處輸入圖片說明
喜歡是真的，但它不會被添加到likeBook。我的代碼有什么問題？我該如何解決？
uj5u.com熱心網友回復：
我會首先搜索這本書，然后切換like屬性title并將整本書添加到likedBook陣列中。
case LIKED :
// search if book already in state to like
const book = state.book.find(book => book.title === action.item.title);
// book found
if (book) {
// create new liked book object
const likedBook = { ...book, liked: true };
return {
...state,
// map to new books array, add new liked book or existing book
books: state.books.map((book) => book.title === action.item.title
? likedBook
: book
),
// append to new likedBook array
likedBook : state.likedBook.concat(likedBook),
}
}
// book not found, return current state
return state;
uj5u.com熱心網友回復：
在case LIKED的return陳述句中，不是逐行執行的。
像這樣修改代碼。
case LIKED :
return {
...state,
books : state.books.map((book) => book.title === action.item.title ? {...book, liked: true} : book),
likedBook : [...state.likedBook, state.books.find(book => book.title === action.item.title)]
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/357356.html
標籤：javascript 反应 反应还原