React Show data with page refresh on Button click答案

【问题标题】：React Show data with page refresh on Button clickReact Show data with page refresh on Button click
【发布时间】：2022-01-22 08:41:38
【问题描述】：

我有对象数组作为数据。数据在初始页面加载时显示。当使用 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",
    
  },

【问题讨论】：

标签： javascript arrays reactjs show-hide

【解决方案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。
这将避免在清除数据时需要刷新页面。

【讨论】：

工作，谢谢！！！

【解决方案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 设置为空，当您想要显示您的图书列表时将其设置为 books 对象。

【讨论】：