使用 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 内部的函数时，它会导致无限循环。

完整代码：

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

您可以将状态分成更小的块：

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

更易于管理。

如果每次 state 更改时调用您的 useEffect，另一方面每个 useEffect returns 新状态对象 - 好吧。无限循环。

只需将计算放在 onChange 函数中，您根本不需要 useEffect（或者只使用 useEffect 会产生副作用，例如 console.log );

使用 useEffect 时无限循环

Infinite loop while using useEffect

javascript

setstate

typescript

reactjs

use-effect