Tengo una matriz de objetos como datos. Los datos se muestran en la carga de la página inicial. Cuando se llama al botón Clear Book con la función clearBooks(), configuro la matriz en vacío (no se muestran datos) y cambio el valor del botón a Show Books
Lo que estoy tratando de lograr es que cuando se haga clic en el botón Show Books , me gustaría mostrar todos los objetos como antes. Pensé en actualizar la página con window.location.reload(); cuando se hace clic en Show Books (si hay una solución mejor, ábrala para usarla). Necesito ayuda para lograr esta funcionalidad en el código.
principal.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> );Datos
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", },Puede almacenar los datos obtenidos originalmente en un estado separado y restablecer la matriz de datos de booksData estableciendo su valor igual a ese estado en el clic de 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); } }; ... Por supuesto, deberá establecer originalBooksData igual a booksData cuando se carguen los datos.
Esto evitará la necesidad de actualizar la página al borrar los datos.
Puede lograr esto usando useState hook.
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); } Establezca bookList en vacío cuando necesite borrar la lista de books y en el objeto de libros cuando desee mostrar sus libros de lista.