Haciendo mi primer proyecto en reaccionar pero imprimiendo la consola dos veces.
import axios from 'axios'; export default function App() { const [searchText ,setSearchText]=useState(""); console.log(searchText); //api key function searchForOrder(){ //set up correct api call var APICall= `http://lookup-app.teflon.order-services.com/orders-lookup/services/v4/orders?orderNo=${searchText}`; console.log(APICall) //handle api call axios.get(APICall) .then(function (response) { //success console.log(JSON.parse(response.data)); }) .catch(function (error) { console.log(error); }); } return ( <div className='template'> <div className='search'> <div className='form-control'> <label htmlFor='number'>Search your order Number</label> <input type='name' name='OrderNo' id='OrderNo' value={searchText} onChange={e => setSearchText(e.target.value)} /> <button onClick={searchForOrder} className='submit'>search</button> </div> </div> </div> ) }Mi consola se ve así: cada número se imprime dos veces
¿Puede alguien decirme dónde me estoy equivocando porque no he trabajado en reactJs antes? ¡Gracias por adelantado!
Esto se debe a la nueva representación de los componentes, React representa cada componente varias veces, llame a console.log dentro del enlace useEffect y pase el valor de texto de búsqueda dentro de la matriz de dependencia useEffect.
Ejemplo:
useEffect(() => { console.log(searchText); ; }, [searchText]);PD: no olvides importar useEffect de reaccionar antes de usarlo.