tengo un componente Quiero calcular algunos números aquí. Al hacer clic en el botón, no funciona con onClick={() => setEarned(calculateEarned)} . Pero cuando lo cambio como onClick={setEarned(calculateEarned)} funciona solo una vez y cuando se carga la página. Así que estoy apilado. ¿Dónde está el problema que no pude encontrar?
import { Button, PrimaryButton } from "../../components/Button/Button" export const CryptoCalculator = () => { const [earned, setEarned] = useState(0) function calculateEarned() { console.log('hit') return 1 } return ( <Container> <PrimaryButton title="Calculate" onClick={() => setEarned(calculateEarned)} ></PrimaryButton> <Earned>{earned}</Earned> </Container> ) } EDITO: Problema resuelto. El problema es con el componente PrimaryButton . Probé con el button y luego la función funcionó. Aquí está el componente Button :
import styled from "styled-components" const Btn = styled.button` /*some css codes*/ ` const PrimaryBtn = styled(Btn)` /*some special css codes for primary button*/ ` export const Button = ({ title }) => { return <Btn>{title}</Btn> } export const PrimaryButton = ({ title }) => { return <PrimaryBtn>{title}</PrimaryBtn> }Debe llamar a su función de la manera correcta. setEarned(calculateEarned()) en lugar de setEarned(calculateEarned)
Ejemplo :
export const CryptoCalculator = () => { const [earned, setEarned] = useState(0) function calculateEarned() { console.log('hit') return 1 } return ( <Container> <PrimaryButton title="Calculate" onClick={() => setEarned(calculateEarned())} ></PrimaryButton> <Earned>{earned}</Earned> </Container> ) }onClick prop al componente Button y luego comenzó a actuar como un botón. Entonces, ¡problema resuelto!
export const Button = ({ title, onClick }) => { return <Btn onClick={onClick}>{title}</Btn> } export const PrimaryButton = ({ title, onClick }) => { return <PrimaryBtn onClick={onClick}>{title}</PrimaryBtn> }