Question

from dataclasses import dataclass, asdict


@dataclass
class DataclassAsDictMixin:
    def asdict(self):
        d = asdict(self)
        for field, value in ((f,v) for f,v in vars(self).items() if f in d):
            try:
                value = value.asdict()
            except AttributeError:
                pass
            else:
                d.update([(field, value)])
        return d


@dataclass
class Item:  
    name: str = None
    identifier: int = None

    def asdict(self):
        d = asdict(self)
        for k,v in d.copy().items():
            if v is None:
                del d[k]
        return d

@dataclass
class Container(DataclassAsDictMixin):
    item: Item
    cid: int
    cname: str = None


if __name__ == "__main__":
    c1 = Container(Item(name="item-1"), cid=10)
    assert c1.asdict() == {'item': {'name': 'item-1'}, 'cid': 10, 'cname': None}
    c2 = Container(Item(identifier="id-1"), cid=10)
    assert c2.asdict() == {'item': {'identifier': 'id-1'}, 'cid': 10, 'cname': None}

问题：上述计时功能会定期更改状态，但4秒钟后图像将无法控制地更改

问题：如何每1秒更改一次状态？重复所需的图像。

image_3 / image_2 =表示图像位置

Answer 1

在state中为当前图像保留索引，然后定义一种每秒增加其索引的方法。在useEffect中调用该方法以启动页面加载，然后通过索引数组为img填充正确的图像。

function Carousel() {
  const [imageIndex, setImageIndex] = React.useState(0);
  const images = ["image_1", "image_2", "image_3"];

  const nextImage = () => {
    setImageIndex(prev => (prev + 1) % images.length)
    setTimeout(nextImage, 1000)
  }

  React.useEffect(nextImage, [])
  return (
    <div>
       <img src={images[imageIndex]} alt={images[imageIndex]}/>
    </div>
  );
}

ReactDOM.render( <Carousel /> , document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如何定期更改状态值？

1 个答案: