reactjs - 使用 useState 和 setInterval 反应 useEffect

Question

使用以下代码通过组件 DOM 旋转对象数组。问题是状态永远不会更新，我不能锻炼为什么..？

    import React, { useState, useEffect } from 'react'

const PremiumUpgrade = (props) => {
    const [benefitsActive, setBenefitsActive] = useState(0)


// Benefits Details
const benefits = [
    {
        title: 'Did they read your message?',
        content: 'Get more Control. Find out which users have read your messages!',
        color: '#ECBC0D'
    },
    {
        title: 'See who’s checking you out',
        content: 'Find your admirers. See who is viewing your profile and when they are viewing you',
        color: '#47AF4A'
    }
]


// Rotate Benefit Details
useEffect(() => {
    setInterval(() => {
        console.log(benefits.length)
        console.log(benefitsActive)

        if (benefitsActive >= benefits.length) {
            console.log('................................. reset')
            setBenefitsActive(0)
        } else {
            console.log('................................. increment')
            setBenefitsActive(benefitsActive + 1)
        }
    }, 3000)
}, [])

我得到的输出如下图所示。我可以看到 useState 'setBenefitsActive' 被调用，但 'benefitsActive' 从未更新。

标签： reactjsreact-hooks

Answer 1

您没有传递任何依赖项，useEffect这意味着它只会运行一次，因此参数 forsetInterval只会收到benefitsActive（在本例中为0）的初始值。

您可以通过使用函数来修改现有状态，而不仅仅是设置值，即

setBenefitsActive(v => v + 1);