React Show data with page refresh on Button click

Question

我有 object 數組作為數據。 數據在初始頁面加載時顯示。 當使用 clearBooks() function 調用 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",
    
  },

Answer 1

您可以將最初獲取的數據存儲到單獨的 state 中，並通過在Show Books單擊上將其值設置為等於 state 的值來重置booksData數組：

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 。
這將避免在清除數據時需要刷新頁面。

Answer 2

您可以通過使用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 設置為空，當您想要顯示您的圖書列表時將 bookList 設置為books object。