En un componente, cuando se proporciona una entrada, envía la entrada a un reductor
const changeSearchTerm = (e) => { setSearchTerm(e.target.value) dispatch(userActions.searchByName(searchTerm)); }Luego, el reductor toma ese valor e intenta filtrar la matriz en función de esa entrada
searchByName: (state, action) => { state.search = action.payload; let newArray = state.users.filter((user) => user.name.toLowerCase().includes(state.search.toLowerCase()) ); state.users = newArray; },Luego, toda esta matriz se muestra en uno de los otros componentes. La barra de búsqueda funciona hasta cierto punto: cuando comienza a escribir en la barra de búsqueda, solo comienza a funcionar después de la segunda entrada. En la consola, noté que si escribe "Timmothy", solo registrará "Timmoth" en el estado. Además, si elimino texto de la entrada, el estado de la matriz no se actualiza y permanece igual aunque cambie el valor de entrada.
Entonces, lo que sucede actualmente es que si comienza a escribir en la barra de búsqueda, actualiza la matriz, pero siempre solo registra la penúltima pulsación de tecla. Además, si elimina la entrada de la barra de búsqueda, no se registra. El valor cambia, pero la matriz permanece con solo unos pocos elementos.
He intentado no usar la variable adicional para almacenar el estado y hacerlo así
state.users.filter((user) => user.name.toLowerCase().includes(state.search.toLowerCase())Pero luego no pasa absolutamente nada. Agradecería si alguien pudiera decirme lo que me estoy perdiendo aquí
EDITAR
Este es el componente que recibe esa entrada.
<input onChange={changeSearchTerm} type="text" value={searchTerm}></input> Y el valor de searchTerm se guarda en useState - const [searchTerm, setSearchTerm] = useState("");
Por lo que puedo decir, solo funciona después de la segunda entrada debido a este bloque:
const changeSearchTerm = (e) => { setSearchTerm(e.target.value) dispatch(userActions.searchByName(searchTerm)); } Los establecedores de estado como setSearchTerm son en realidad asincrónicos . Esto significa que después de llamar a setSearchTerm , en la línea siguiente, el valor de searchTerm sigue siendo el valor anterior.
En su lugar, puede realizar una de las siguientes acciones:
const changeSearchTerm = (e) => { setSearchTerm(e.target.value) dispatch(userActions.searchByName(e.target.value)); } const changeSearchTerm = (e) => { setSearchTerm(e.target.value, () => { // This callback runs only after state has changed dispatch(userActions.searchByName(searchTerm)); }); } Editar: lo siento, me perdí que usaste useState/funcional. Puedes usar useEffect :
const changeSearchTerm = (e) => { setSearchTerm(e.target.value); } useEffect(() => { if (searchTerm.length > 0) { dispatch(userActions.searchByName(searchTerm)); } }, [searchTerm]);De esta manera, su envío se ejecutará correctamente cada vez que cambie el valor de searchTerm con seguridad.