在按钮单击时通过页面刷新反应显示数据

Question

我有对象数组作为数据。数据显示在初始页面加载时。当使用 clearBooks() 函数调用 Clear Book 按钮时，我将数组设置为空（不显示数据）并将按钮值更改为 Show Books

我想要实现的是，当单击 Show Books 按钮时，我想像以前一样显示所有对象。我虽然在单击 Show Books 时使用 window.location.reload(); 刷新页面（如果有更好的解决方案，请打开以使用它们）。我需要帮助才能在代码中实现此功能

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

您可以将最初获取的数据存储到一个单独的状态中，并通过在 Show Books 单击时将其值设置为等于该状态来重置 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 对象。

在按钮单击时通过页面刷新反应显示数据

React Show data with page refresh on Button click

javascript

arrays

show-hide

reactjs