鍍金池/ 問答/HTML/ 把父組件的值賦值給子組件，但子組件不變

把父組件的值賦值給子組件，但子組件不變

//code組件默認(rèn)顯示，點(diǎn)擊開始隱藏
//然后點(diǎn)擊顯示，修改qqqVisible為true，就顯示繼續(xù)
//如果startedVisible為false，點(diǎn)擊開始/關(guān)閉的操作不同
//現(xiàn)在的問題是我修改了qqqVisible和startedVisible，到QRcode.js就賦值不了aaa和bbb，
//如果不定義aaa和bbb，直接用qqqVisible和startedVisible的狀態(tài)，就提示undefined，獲取不到true和false了

回答
編輯回答
若相惜

> componentWillReceiveProps(nextProps) {
        this.setState({
            startedVisible: nextProps.startedVisible,
            qqqVisible: nextProps.qqqVisible,
        })
        if(this.state.qqqVisible){
            this.setState({
                aaa: true
            })
        }
        if(this.state.startedVisible){
            this.setState({
                bbb: true
            })
        }else{
            this.setState({
                bbb: false
            })
        }
    }

setState并不是立即執(zhí)行的，因此這里你在setState之后直接訪問this.state.xxx是無法獲得this.state的最新狀態(tài)的，所以對(duì)aaa和bbb的設(shè)置無法獲得預(yù)期效果。
aaa和bbb的值由startedVisible和qqqVisible決定，而這兩個(gè)值都是已知的，因此可以直接寫在第一個(gè)setState里面。

componentWillReceiveProps(nextProps) {
        this.setState({
            startedVisible: nextProps.startedVisible,
            qqqVisible: nextProps.qqqVisible,
            // 直接在這里設(shè)置
            aaa:nextProps.qqqVisible,
            bbb:nextProps.startedVisible
        })
        if(this.state.qqqVisible){
            this.setState({
                aaa: true
            })
        }
        if(this.state.startedVisible){
            this.setState({
                bbb: true
            })
        }else{
            this.setState({
                bbb: false
            })
        }
    }
2018年3月19日 08:11