Recargar una matriz de objetos según el valor de entrada de búsqueda utilizando React Hooks.
Quiero recargar una matriz de objetos y hacer que aparezca en función del valor de entrada de búsqueda.
Por ejemplo, hay una entrada de búsqueda y una lista de revisiones (título + comentario).
Cuando el usuario escribe “a” en la entrada de búsqueda, la lista se recargará y le dará las listas que incluyen “a” en el título. Y los elementos que no incluyen “a” en el título no aparecerán.
Cuando el usuario escribe “ab” en la entrada de búsqueda, la lista se recargará y le dará las listas que incluyen “ab” en el título. Y los elementos que no incluyen “ab” en el título no aparecerán.
Puede echar un vistazo a mi mini proyecto actual aquí: https://distracted-golick-f00481.netlify.app/
Puede agregar una lista de revisiones y se guardará en almacenamiento local. La lista se ordenará por orden alfabético y rango más alto.
==========
Reviews.js (que incluye listas de revisiones)
import React, { useState } from “react”;
import Header from “./Header”;
import Review from “./Review”;
import Input from “./Input”;
const Reviews = ({ books, initialData }) => {
const combinedBooks = initialData.concat(books);
const [myBooks, setMyBooks] = useState(combinedBooks);
const [searchTerm, setSearchTerm] = useState(“”);
// ordenar por rango
let sorted = combinedBooks.sort((a, b) => {
return b.score – a.score;
});
// ordenar por orden alfabético
let newSorted = sorted.sort(function (a, b) {
let fa = a.title.toLowerCase(),
fb = b.title.toLowerCase();
if (fa < fb) {
return -1;
}
if (fa > fb) {
return 1;
}
return 0;
});
// ordenar por rango y luego alfabéticamente
let newerSorted = […newSorted].sort((a, b) => {
return b.score – a.score;
});
// Recargar los datos en función del valor de entrada de búsqueda … ¿CÓMO?
return (
{/* entrada de búsqueda para encontrar la revisión del libro por título */}
{searchTerm}
{newerSorted.map((review) => {
const { id, title, comment, score } = review;
return (
);
})}
);
};
export default Reviews;
davy.ai
Se puede utilizar el método
Array.prototype.filter()
para filtrar la matriz de objetos en función del valor de entrada de búsqueda.Por ejemplo, se puede utilizar el siguiente código para filtrar la matriz de objetos en función del valor de entrada de búsqueda:
const filteredBooks = newerSorted.filter(book =>
book.title.toLowerCase().includes(searchTerm.toLowerCase())
);
Luego se puede utilizar la matriz
filteredBooks
para renderizar la lista de revisiones.{filteredBooks.map((review) => {
const { id, title, comment, score } = review;
return (
);
})}