Estoy tratando de llamar a una función para obtener datos de una API y mostrar los datos. Sin embargo, cuando llamo a esta función, la página se actualiza y el estado se restablece para que la página no muestre nada.

En un componente secundario, tengo un cuadro de entrada y un formulario. Al enviar, este formulario guardará la entrada en el estado (listOfNames) en el componente principal. Concateno ya que el estado es una matriz que se puede agregar en cualquier momento para buscar más nombres. El resultado se muestra en la tabla.

 <Form onSubmit={() => props.setListOfNames(props.listOfNames.concat(localName))}> <InputGroup> <FormControl type="text" placeholder="Add Name" onChange={(e) => setLocalName(e.target.value)}/> <Button variant="outline-secondary" type="submit" variant="primary">Button</Button> </InputGroup> </Form>

En el padre tengo un UseEffect que detecta un cambio en este estado.

 useEffect(() => { searchNames(); }, [listOfNames]);

Al cambiar, llamará a una función (searchNames) para obtener datos de la API. La función de búsqueda utiliza el estado listOfNames para buscar.

 const searchNames = () =>{ //e.preventDefault(); doesn't work even with 'e' as param fetch(API_URL, { method:'POST', headers: { "Content-Type": "application/json; charset=utf-8"}, body: JSON.stringify(listOfNames) }) //... and so on

Sin embargo, cuando llamo a esta función, toda la página se actualiza y los datos no se mostrarán, ya que la actualización restablece el estado de listOfNames a nada antes de que pueda buscar. Quiero saber si es posible pasar un evento a esta función para poder prevenirDefault() o si hay otra solución.