【无标题】

今日份知识总结及之前的遗留小问题总结

2022/1/18 from 高鑫川

1. 首先第一个是最近开发中遇到的需要解决的问题，关于使用定时器循环获取状态后修改state中的数组中的某个对象的值的问题
   首先是这几天在问答中大神的回答：

// 大腿id
韩旭在努力鸭 2022-01-17 09:14
        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)
 

然后今天晚上试了一下，老哥说的确实可以，我也加了一下其他的条件修改，确实解决了我的问题，大哥牛批！！！

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

    changeState = () => {
    	// 修改数据的方法
    	// 首先对于目标数据进行一个单独的变量定义，方便后续修改调用
        let TestData = this.state.TestData;
        const setInt =  setInterval(() => {
        	// 在定时器中对目标进行遍历，找到符合条件的数据对其内容进行修改
            TestData.map((item,index) => {
                // 判定条件，再次可写其他
                if(item.name==="one"){
                    item.progress+=10;
                }
                // 当进度进行至100%时，执行清除定时器的操作，并尝试修改轻重按钮可使用性的修改
                if(item.progress == 100){
                    clearInterval(setInt)
                    item.ifshowOne = true
                }
            })
            // 最终修改state中的值还是需要setState进行对应值修改
            this.setState({
                TestData:TestData
            })
            console.log('TestData', this.state.TestData)
        }, 1000);
        // 此处也是在其他大哥的博客中学到的关于局部数据全局化的方法，
        // 即将该局部数据赋值给window中的自定义字段，
        // 全局即可通过window.自定义字段拿到该值
        // 目前还有个小疑问关于是否胡变量泄露，即其他页面也会获取到该值
        // 实际操作了一下并不会，但是否会造成内存溢出，我暂时不太清楚
        window.Interval = setInt
    }

    clearInter = () => {
    	// 清除定时器
        clearInterval(window.Interval)
    }

    render(){
        const { TestData } = this.state
        return(
            <div>
                <div>
                    <p>{TestData[0].name}</p>
                    <Progress percent={TestData[0].progress} />
                    <Button disabled={TestData[0].ifshowOne}>one</Button>
                    <Button disabled={TestData[0].ifshowTwo}>Two</Button>
                </div>
                <div>
                    <p>{TestData[1].name}</p>
                    <Progress percent={TestData[1].progress} />
                    <Button disabled={TestData[1].ifshowOne}>one</Button>
                    <Button disabled={TestData[1].ifshowTwo}>Two</Button>
                </div>
                <div>
                    <Button onClick={this.changeState}>
                        修改state的prgress
                    </Button>
                    <Button onClick={this.clearInter}>
                        清除state的setInterval
                    </Button>
                </div>
            </div>
        )
    }

以上即为对于setState动态修改值的学习记录

🆗 打卡