來自子組件的SetState在React Native上失敗

Question

我有一個Child組件，它在Parent組件中觸發了一個功能。 盡管該函數被觸發，但setState方法似乎引發以下錯誤。

可能的未處理的承諾拒絕（id：0）：未定義不是對象（評估'_this12.setState'）

子組件：

return (
    <View style={styles.buttonWrapper}>
        <View style={styles.socialMediaButtonWrapper}>
            <TouchableHighlight style={styles.socialMediaButtonBackFill} onPress={() => {
                this.props.onFacebookAuthenticationPressed()
            }}>
                <View style={[styles.socialMediaButtonFill, {backgroundColor: '#5158bb'}]}>
                    <FontAwesome style={styles.socialMediaButtonTextIconFill} name="facebook" size={20}/>
                </View>
            </TouchableHighlight>
        </View>
    </View>
);

父項（包括代碼的子項）：

<FacebookLoginComponent
    facebookAccessToken={this.state.facebookAccessToken}
    onFacebookAuthenticationPressed = {this.onFacebookAuthenticationPressed}
/>

功能：

onFacebookAuthenticationPressed: function () {
    LoginManager.logInWithReadPermissions(['public_profile', 'email']).then(function (result) {
        if (result.isCancelled) {
            console.log("Login Cancelled");
        } else {
            console.log("Login Successful");
            AccessToken.getCurrentAccessToken().then(
                (data) => {
                    let accessToken = data.accessToken;
                    console.log(accessToken);
                    this.setState({
                        facebookAccessToken: accessToken
                    })
                })
        }
    }, function (error) {
        console.log("some error occurred!!");
    }).done(() => {
        this.markAsComplete();
    })
},

我正在使用react-native-fbsdk庫進行身份驗證。 從console.log打印令牌，但是setState()失敗。

為什么是這樣？ 解決方法是什么？

Answer 1

子組件的小修正（不是必需的，但是更好）：

return (
    <View style={styles.buttonWrapper}>
        <View style={styles.socialMediaButtonWrapper}>
            <TouchableHighlight style={styles.socialMediaButtonBackFill} onPress={this.props.onFacebookAuthenticationPressed}>
                <View style={[styles.socialMediaButtonFill, {backgroundColor: '#5158bb'}]}>
                    <FontAwesome style={styles.socialMediaButtonTextIconFill} name="facebook" size={20}/>
                </View>
            </TouchableHighlight>
        </View>
    </View>
);

父組件的構造函數：

this.onFacebookAuthenticationPressed = this.onFacebookAuthenticationPressed.bind(this);

我不建議在render函數中使用bind。 盡管您應該真正使用ES6，但已經提供了對本機的支持。 類屬性而不是綁定：

onFacebookAuthenticationPressed = () => {
    LoginManager.logInWithReadPermissions(['public_profile', 'email']).then((result) => {
        ...
    }, function (error) {
        console.log("some error occurred!!");
    }).done(() => {
        this.markAsComplete();
    })
};

...或使用ES5：

onFacebookAuthenticationPressed: function() {
    LoginManager.logInWithReadPermissions(['public_profile', 'email']).then(function (result) {
        ...
    }.bind(this), function (error) {
        console.log("some error occurred!!");
    }).done(function() {
        this.markAsComplete();
    }.bind(this));
};

Answer 2

onFacebookAuthenticationPressed: function () {
    LoginManager.logInWithReadPermissions(['public_profile', 'email']).then((result) => {
        if (result.isCancelled) {
            console.log("Login Cancelled");
        } else {
            console.log("Login Successful");
            AccessToken.getCurrentAccessToken().then(
                (data) => {
                    let accessToken = data.accessToken;
                    console.log(accessToken);
                    this.setState({
                        facebookAccessToken: accessToken
                    })
                })
        }
    }, function (error) {
        console.log("some error occurred!!");
    }).done(() => {
        this.markAsComplete();
    })
},

注意result =>在這里，它將傳遞給您的回調

Answer 3

將bind（this）添加到函數中...

 <FacebookLoginComponent facebookAccessToken={this.state.facebookAccessToken} onFacebookAuthenticationPressed = {this.onFacebookAuthenticationPressed.bind(this)}// solution />