使用 useEffect 時的無限循環

Question

我正在遍歷以下數組的內容：

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",
        },
    ],
}

我的問題如下：

• 這是什么原因造成的？
• 我該如何解決？

Answer 1

1. 您可以將 state 分成更小的塊：

const [stake, setStake] = useState(10);
const [totalOdds, setTotalOdds] = useState(0);
const [potentialPayout, setPotentialPayout] = useState(0);

更容易管理。

2. 如果每次state發生更改時都會調用您的useEffect ，另一方面，每個useEffect返回新的 state object - 好吧。 無限循環。

只需將計算放在onChange function 中，您根本不需要useEffect （或者只是使用useEffect引起副作用，例如console.log ）；