来自儿童组件的SetState在React Native上失败

Question

我有一个子组件，它会在父组件中触发功能。尽管触发了该功能，但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);

我不建议在渲染函数中使用绑定。不过，您应该真正使用ES6，React Native已经支持了这一点。类属性而不是绑定：

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
/>