反应 onclick setState 不适用于箭头功能

Question

我有一个组件。 我想在这里计算一些数字。 单击按钮时，它不适用于onClick={() => setEarned(calculateEarned)} 。 但是当我像onClick={setEarned(calculateEarned)}一样改变它时，它只工作一次，并且在页面加载时。 所以我是堆栈。 我找不到问题在哪里。

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>
    )
}

编辑：问题解决了。 问题出在PrimaryButton组件上。 我尝试使用button ，然后功能起作用。 这是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>
}

Answer 1

您需要以正确的方式调用您的函数。 setEarned(calculateEarned())而不是setEarned(calculateEarned)

例子 ：

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>
    )
}

Answer 2

我已将onClick道具添加到Button组件，然后它开始像按钮一样工作。 所以，问题解决了！

export const Button = ({ title, onClick }) => {
    return <Btn onClick={onClick}>{title}</Btn>
}

export const PrimaryButton = ({ title, onClick }) => {
    return <PrimaryBtn onClick={onClick}>{title}</PrimaryBtn>
}