在 useEffect 中从数组中添加数字

Question

我正在尝试使用钩子将数组中的数字相加。目前它是一个投票系统。使用 map 语句添加所有数字的结果给我 0。我很确定这与 useState 没有及时更新以添加数字有关，因此它总是给我零。我知道我可以将它们放在一个单独的数组中，然后添加它，但是对于看起来如此简单的东西来说，这似乎有点冗长。这是我拥有的产生 0 的代码const PollResultsContainer = (props) => {    const option = props.option    const [totalVotes, setTotalVotes] = useState(0)    useEffect(() => {        let newVote        if (option.length > 0) {            option.map(opt => {                newVote = opt.optionVotes + totalVotes            })        }        setTotalVotes(newVote)    }, [totalVotes])    console.log(totalVotes)    return (        <>            <div className='poll-results-div'>                <TitleCardNS title={`${totalVotes}`} size='2.5rem' align='center' color='white' />            </div>

Answer 1

不需要用状态收藏。

const PollResultsContainer = ({option}) => {

  let totalVotes = option.reduce((acc, {optionVotes}) => acc + optionVotes, 0);

  console.log(totalVotes);

};

Answer 2

我认为您在此组件中不需要任何状态或效果：

const PollResultsContainer = (props) => {

    const option = props.option

    let totalVotes = 0;

    if (option.length > 0) {

        option.forEach(opt => {

            totalVotes += opt.optionVotes

        })

    }

    console.log(totalVotes)

Answer 3

我在等式中添加了另一个变量。这大概解决了useState没有及时更新的问题。

const PollResultsContainer = (props) => {

    const option = props.option

    const [totalVotes, setTotalVotes] = useState(0)

    let newVote = 0

    useEffect(() => {

        if (option.length > 0) {

            option.map(opt => {

                newVote = opt.optionVotes + newVote

                console.log(newVote)

            })

        }

        console.log(newVote)

        setTotalVotes(newVote)

    }, [totalVotes])

    console.log(totalVotes)