react定时器动态修改state数组中对象的值

想问一下各位大腿子react如何在定时器中动态修改state中的数组中某个对象的值

代码如此: (想要修改的是其中的一个数组中的progress的值)

constructor(props){
        super(props);
        this.state = {
            TestData:[
                {
                    name:'one',
                    progress: 0,
                    ifshowOne: false,
                    ifshowTwo: false
                },
                {
                    name: 'Two',
                    progress: 0,
                    ifshowOne: false,
                    ifshowTwo: false
                }
            ]
        }
    }


img

页面如此,想要在定时器中修改值以达到进度动态显示的效果

        setTimeout(()=>{
        let { TestData } = this.state
        TestData = TestData.map(item => {
         if(item.name=='one'){
            return { ...item, progress:item.progress+1}
          }
        return item

        })
        this.setState({
            TestData
        })
        },1000)

那你需要 遍历 一下 数组,找到想要改变的项 然后进行 改变 。


let { TestData}=this.state;
  setInterval(()=>{
    TestData.map((item)=>{
      if(item.name=="Two"){ //如果想要 改变所有 就不用判断了 。 只想改变某一个 就需要 用唯一标识判断一下
        item.progress+=10;
      }
    })
    this.setState({
      TestData:TestData
    })
  })