Estoy creando una funcionalidad de búsqueda en mi aplicación con la ayuda de redux. Pero no está funcionando como se esperaba.
Mi estado inicial se ve así:
const initialState = { //some other state data locationSummaries: [], }Mi función reductora para actualizar esta matriz de locationSummaries se da como:
const updateLocationSummaries = (state, action) => { state.locationSummaries = [...action.payload]; },Mi función para filtrar la matriz en función de la búsqueda de entrada se da como:
const handleInputSearch = (e) => { const { value } = e.target; const searchText = value.toLowerCase().trim(); let filteredLocations = locationSummaries.filter((locationSummary) => locationSummary.locationName.toLowerCase().startsWith(searchText) ); dispatch(updateLocationSummaries(filteredLocations)); };Aquí searchText es el valor que estoy ingresando en el cuadro de texto de entrada
Entonces, en esto, estoy filtrando las listas de matrices cuando estoy escribiendo el texto en el cuadro de búsqueda de entrada.
Después de enviar las listas filtradas, mi estado se actualiza. Pero mi matriz locationSummaries finalmente se vaciará. Entonces, ¿qué estoy haciendo mal en este escenario?
El problema es que actualizas la misma matriz.
const initialState = { //some other state data locationSummaries: [], filteredLocationSummaries: [], }locationSummaries en el archivo ation. const updateLocationSummaries = (state, action) => { state.filteredLocationSummaries = [...action.payload]; },filteredLocationSummaries para representar los valores filtrados.La mejor respuesta aquí es no mantener los valores filtrados en state .
En su lugar, mantenga los datos originales en Redux, mantenga una descripción de cómo filtrar los datos en el componente y realice el filtrado mientras se procesa :
const items = useSelector(state => state.some.items); const [filterText, setFilterText] = useState(''); const filteredItems = useMemo(() => { if (!filterText) return items; return items.filter(item => item.includes(filterText); }, [items, filterText]);