我有物件陣列作為資料。資料在初始頁面加載時顯示。當使用 clearBooks() 函式呼叫 Clear Book 按鈕時，我將陣列設定為空（不顯示資料）并將按鈕值更改為Show Books
我想要實作的是當Show Books單擊按鈕時，我想像以前一樣顯示所有物件。我想在單擊window.location.reload();時重繪 頁面Show Books（如果有更好的解決方案，請打開以使用它們）。我需要幫助才能在代碼中實作此功能
main.js
const clearBooks = () => {
if (buttonTitle === "Clear Books") {
setButtonTitle("Show Books");
}
setBooksData([]);
};
return (
<section className="booklist">
{booksData.map((book, index) => {
return (
<Book key={index} {...book}>
</Book>
);
})}
<div>
<button type="button" onClick={clearBooks}>
{buttonTitle}
</button>
</div>
</section>
);
資料
export const books = [
{
id: 1,
img: "https://m.media/_QL65_.jpg",
author: " A ",
title: "B",
},
{
id: 2,
img: "https://m.media/_QL65_.jpg",
author: " A ",
title: "B",
},
uj5u.com熱心網友回復：
您可以將最初獲取的資料存盤到單獨的狀態中，并booksData通過將其值設定為等于Show Books單擊時的狀態來重置陣列：
const [originalBooksData, setOriginalBooksData] = useState([]);
const [booksData, setBooksData] = useState([]);
const fetchBooks = async () => {
...
// After booksData have been fetched set originalBooksData equal to it
setOriginalBooksData(booksData)
}
const clearBooks = () => {
if (buttonTitle === 'Clear Books') {
// Clear the books
setButtonTitle('Show Books');
setBooksData([]);
} else {
// Reset the books
setBooksData(originalBooksData);
}
};
...
當然，您需要在加載資料時設定originalBooksData等于。
這將避免在清除資料時需要重繪 頁面。booksData
uj5u.com熱心網友回復：
useState您可以通過使用鉤子來實作這一點。
const books = [
{
id: 1,
img: "https://m.media/_QL65_.jpg",
author: "A",
title: "B",
},
{
id: 2,
img: "https://m.media/_QL65_.jpg",
author: " A ",
title: "B",
},
]
const [bookList, setBookList] = useState(books);
const clearBooks = () => {
setBookList("");
}
const showBooks = () => {
setBookList(books);
}
當您需要清除圖書串列時將 bookList 設定為空，當您books想要顯示您的串列圖書時將其設定為反對。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/418670.html
標籤：
上一篇：React：動態添加輸入文本