Javascript 在不同的时间段逐个替换图像

我想用

loadingImg

替换

foundImg

，用于

系列

数组。第一个在2秒之后，第二个在3秒之后

此代码同时替换它们

const loadingImg = require('./assets/25.gif');
const foundImg = require('./assets/done_Icon.png');

class App  extends Component {

 state = {
    families: [
      {id:0, name: "Accident History", duration: 2000, image: loadingImg},
      {id:1, name: "Title Information", duration: 3000, image: loadingImg},
      {id:2, name: "Liens", duration: 5000, image: loadingImg}
    ],
  }

componentDidMount(){
    const newFamilies = this.state.families;
    newFamilies.map(item => { 
      item.image = foundImg;
      setTimeout(() => this.setState({families: newFamilies}),item.duration)       
    })
}

试试这个片段

componentDidMount() {
    this.state.families.forEach(item => { 
      setTimeout(() => {
        const families = this.state.families.slice();
        const itemFound = families.filter(i => i.id === item.id)[0];
        itemFound.image = foundImg;
        this.setState({families: families})
      }, item.duration)       
    })
}

---

避免在不变换数组时使用贴图。改用foreach。

您是否尝试过向setTimeout函数添加时间，例如setTimeout（function（）{alert（“Hello”）；}，3000）；3000-3秒显示为30000毫秒？