时间戳

首页 > 解决方案 > 使用 ReactJS Hooks 通过 useState 增加价值

reactjs - 使用 ReactJS Hooks 通过 useState 增加价值

问题描述

嗨，我是 ReactJs 世界的新开发人员。我有个问题。我有初始值为 1 的值变量。但是在增加它时我遇到了问题。在 JavaScript 中，我可以一个一个地增加任何值，但我没有使用 Hooks 做同样的事情。我想做的事情是随着时间的推移改变背景图像。你能帮我解决这个问题吗？如何随时间更改背景图像？

我的示例 tsx.part：

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

const LeftPart = (props: any) => {

     let imgNumber : number = 1;

     const [value, setValue] = useState(1);

     useEffect(() => {
        const interval = setInterval(() => {

            imgNumber = imgNumber + 1;
            setValue(value+1);

            console.log(imgNumber)
            console.log(value)
        }, 3000);
        return () => clearInterval(interval);
      }, []);

    return (

        <div className="col-xl-7 col-lg-7 col-md-7 col-sm col-12">
            <img id="image" src={"../../../assets/images/bg"+{value}+".jpg"} style={{ width: "100%", height: "99vh" }} alt="Login Images"></img>
        </div >
    )
}

export default LeftPart;

标签： reactjs

解决方案

你的问题是useEffect块依赖列表（那个空数组）。当你明确设置不依赖项时，React 将在第一次渲染时调用回调，并且不再调用。如果您希望它不断变化，只需完全删除第二个参数。如果您隐式不保留任何useEffect依赖项，则在每次渲染时都会调用它。

固定的：

useEffect(() => {
    const interval = setInterval(() => {
        imgNumber = imgNumber + 1;
        setValue(value+1);
        console.log(imgNumber)
        console.log(value)
    }, 3000);
    return () => clearInterval(interval);
});

推荐阅读