[英]Infinite loop while using useEffect
我正在遍历以下数组的内容:
chosenBets: [
{
id: 2,
label: 2,
odd: 4.8,
team_home: "Liverpool",
team_away: "Sheffield United",
},
{
id: 2,
label: 2,
odd: 4.8,
team_home: "Liverpool",
team_away: "Sheffield United",
},
],
要获得每次投注的总赔率:
const getTotalOdds = () => {
let totalOdds = 0
chosenBets.forEach(bet => {
totalOdds += bet.odd
})
let newState = Object.assign({}, state)
newState.totalOdds = totalOdds
setState({ ...newState })
}
但是当我在 useEffect 内部调用useEffect
时,它会导致无限循环。
完整代码:
import * as React from "react"
import { Frame, Stack, addPropertyControls, ControlType } from "framer"
import { Input } from "./Input"
interface Bets {
id: number
label: number
odd: number
team_home: string
team_away: string
}
interface IProps {
chosenBets: Bets[]
}
const style = {
span: {
display: "block",
},
}
const Row = ({ label, property }) => (
<div style={{ display: "flex", width: "100%" }}>
<span style={{ ...style.span, marginRight: "auto" }}>{label}</span>
<span style={{ ...style.span }}>{property}</span>
</div>
)
export const BetCalculator: React.FC<IProps> = props => {
const { chosenBets } = props
const [state, setState] = React.useState({
stake: 10,
totalOdds: 0,
potentialPayout: 0,
})
const { stake, totalOdds } = state
const onChange = e => {
let newState = Object.assign({}, state)
newState.stake = Number(e.value)
setState({ ...newState })
}
const getTotalOdds = () => {
let totalOdds = 0
chosenBets.forEach(bet => {
totalOdds += bet.odd
})
let newState = Object.assign({}, state)
newState.totalOdds = totalOdds
setState({ ...newState })
}
const getPayout = () => {
let potentialPayout = totalOdds * stake
console.log(potentialPayout, "potentialPayout")
// let newState = Object.assign({}, state)
// newState.potentialPayout = potentialPayout
// setState({ ...newState })
}
React.useEffect(() => {
getTotalOdds()
getPayout()
}, [state])
return (
<Stack alignment="end" backgroundColor="white">
<Row
label="stake"
property={<Input onChange={onChange} value={stake} />}
/>
<Row label="Odds" property={totalOdds} />
</Stack>
)
}
BetCalculator.defaultProps = {
chosenBets: [
{
id: 2,
label: 2,
odd: 4.8,
team_home: "Liverpool",
team_away: "Sheffield United",
},
{
id: 2,
label: 2,
odd: 4.8,
team_home: "Liverpool",
team_away: "Sheffield United",
},
],
}
我的问题如下:
const [stake, setStake] = useState(10);
const [totalOdds, setTotalOdds] = useState(0);
const [potentialPayout, setPotentialPayout] = useState(0);
更容易管理。
state
发生更改时都会调用您的useEffect
,另一方面,每个useEffect
返回新的 state object - 好吧。 无限循环。 只需将计算放在onChange
function 中,您根本不需要useEffect
(或者只是使用useEffect
引起副作用,例如console.log
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.