por lo tanto, recibo el error demasiados renderizados cuando intento actualizar el estado de una matriz.
Declaro una matriz llamada sampleFriends, compuesta de objetos con campos "nombre", "ubicación" e "imagen" (cada elemento de la matriz se parece a: {nombre: 'Juan', ubicación: 'Boston', imagen: Imagen de prueba}).
Luego uso useState de la siguiente manera:
const [searchQuery, setSearchQuery] = useState('') const [friendMatches, setFriendMatches] = useState(sampleFriends)También tengo un componente TextInput:
<TextInput value={searchQuery} onChangeText={setSearchQuery} onChange={search()} placeholder="Search Contacts" keyboardType="default" />Y una función de búsqueda () que se ve así:
const search = () => { const coincidences = sampleFriends.filter(({ name }) => name.includes(searchQuery)) setFriendMatches(coincidences) }Quiero mostrar los usuarios cuyo nombre coincida con searchQuery, y las coincidencias me dan los usuarios, pero no puedo usar setFriendMatches para actualizar el estado de coincidencias (que es lo que me gustaría mostrar). Espero que tenga sentido y gracias por su ayuda!!
ACTUALIZACIÓN: Algunas respuestas me dijeron que cambiara onChange={search()} a onChange={search} y eso eliminó el error. Sin embargo, ahora la búsqueda nunca se ejecuta.
En el evento onChange, simplemente mencione el nombre de la función como este onChange={search} o si necesita poner algunos parámetros, llámelo dentro de una función como se muestra a continuación.
Este es el aspecto que debería tener el bloque de código final.
<TextInput value={searchQuery} onChangeText={setSearchQuery} onChange={() => search()} placeholder="Search Contacts" keyboardType="default" />Déjame saber si funciona
Reemplace su código con esto:
<TextInput value={searchQuery} onChangeText={setSearchQuery} onChange={search} // <- This One is Important placeholder="Search Contacts" keyboardType="default" />Cambie la Línea 4 en TextInput de onChange={search()} a onChange={search} .
Al llamar a la función, está activando una repetición infinita en cada repetición.
Probablemente haya otros problemas, ya que es poco probable que su componente quiera un doble detector de eventos onChange, hice una demostración simple para mostrarle cómo administrar estos escenarios de una manera más limpia: https://stackblitz.com/edit/react-eijegp