我有一個組件。我想在這里計算一些數字。單擊按鈕時，它不適用于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>
}
uj5u.com熱心網友回復：
您需要以正確的方式呼叫您的函式。
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>
)
}
uj5u.com熱心網友回復：
我已經onClick向Button組件添加了prop ，然后它開始像一個按鈕一樣作業。所以，問題解決了！
export const Button = ({ title, onClick }) => {
return <Btn onClick={onClick}>{title}</Btn>
}
export const PrimaryButton = ({ title, onClick }) => {
return <PrimaryBtn onClick={onClick}>{title}</PrimaryBtn>
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/337020.html
標籤：javascript 反应 反应钩子 使用状态