Estoy tratando de publicar en un servidor local usando una función onclick, pero cada vez que el campo de entrada cambia aquí, llama a la función, lo que genera llamadas de función innecesarias, y no puedo entender por qué se llama aquí.
const testPost = () => { console.log("Clicked!") Axios.post('http://localhost:3001/', {testName: "albumName"}) .then(() => { console.log('successful insert') }); }; function App() { const [albumName, setAlbumName] = useState('') return ( <div className="App"> <input type="text" name="albumName" onChange={(e) => { setAlbumName(e.target.value) }}/> <button onClick={testPost()}>Submit</button> </header> </div> ); }Pierde el (), Entonces es solo {testPost} .
Si hace testPost() , está llamando/ejecutando testPost cada vez que se procesa el componente. Tan pronto como el intérprete de JS encuentra esa línea, ejecuta la función.
Con onClick , solo desea pasar la referencia de la función que se llamará al hacer clic . Así que solo usa testPost .
También con reaccionar, cada vez que el estado cambia dentro de un componente, vuelve a representar todo el componente, por eso se llama a su función cada vez que hay un cambio de entrada.