鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ es7 async await 為什么會(huì)對(duì)react setState起作用?

es7 async await 為什么會(huì)對(duì)react setState起作用?

es7 async await 為什么會(huì)對(duì)react setState起作用?setState()并不是一個(gè)promise?。??下面是代碼和日志

constructor(props){
        super(props);
        this.state={
            value:this.props.value||this.props.defaultValue||'',
            result:true,
        }
    }   

    verifier(){

        let result;
        let{rules} = this.props;
        let{value} = this.state;

        switch (this.rulesClassify()){
            case 'fn' :
                result = rules();
                break;
            case 'reg' :
                result = rules.test(value);
                break;
            default :
                result = rules===value;
        }

        this.setState({
            result
        });

    }



    /*
    **
    @每次變動(dòng)callback
    */
    async handleChange(event){

        //受控
        let value=event.target.value;

        await this.setState({
            value
        });

        debug(this.state.result);
        //驗(yàn)證
        await this.verifier();

        debug(this.state.result);

    }

圖片描述

這里驗(yàn)證了input中只能是存數(shù)字,當(dāng)我輸入非數(shù)字時(shí),如果沒有使用 async和await的時(shí)候log就會(huì)輸出兩個(gè)true,而當(dāng)使用async和await時(shí),則是上圖結(jié)果,說明async和await起了作用

回答
編輯回答
不舍棄

await不僅能等待Promise,也可以等待任意表達(dá)式的結(jié)果,如異步函數(shù)的返回值等。
具體找了篇文章你哭看下。
理解 JavaScript 的 async/await

2017年9月30日 05:16
編輯回答
悶騷型

答案有了。
1、非常冒昧的去直接詢問了@司徒正美 老師,老師的答案是巧合。
2、stackoverflow 上也找到了答案 Why does Async Await work with React setState? (具體看 Davin Tryon的回答 關(guān)于regenerator-runtime中_asyncToGenerator)
3、如何合理的解決setState異步帶來的困擾,也許大家需要瀏覽一下這兩篇文章,文章里包含了關(guān)于setState的官方推薦姿勢(shì)和為什么setState不返回promise 從 setState promise 化的探討 體會(huì) React 團(tuán)隊(duì)設(shè)計(jì)思想
setState:這個(gè)API設(shè)計(jì)到底怎么樣

2017年11月17日 09:47