コールバック関数のリターンコンポーネントが呼び出されず、エラーがスローされない

Question

グループコンポーネントは呼び出されませんが、コールバック関数で呼び出される場所をconsole.log(response)に置き換えた場合、呼び出されます。

import React, { Component } from 'react'; 
import { FacebookLogin } from 'react-facebook-login-component'; 
import Group from './Groups' 

class Login extends Component { 
    render() { 

    return (
    <div> 
     <FacebookLogin socialId="****************" 
        language="en_US" 
        scope="user_events,user_managed_groups" 
        responseHandler={response => <Group user={response}/>} 
        xfbml={true} 
        fields="id,email,name" 
        version="v2.5" 
        className="facebook-login" 
        buttonText="Login With Facebook"/> 
     </div> 
    ); 
    } 

} 

export default Login; 

Answer 1

あなたの問題はresponseHandler小道具は、コールバック関数であり、機能をレンダリングしていないユーザーがログインしていると、したがって、それが呼び出されるということである。

あなたはグループ・コンポーネントをレンダリングしたい場合は、あなたがすべきコンポーネントの状態でステータスを保存し、Groupコンポーネントを条件付きでレンダリングします。そのような

何か：

class Login extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     user: null 
    }; 
    } 

    handleFBResponse(response){ 
    this.setState({ 
     user: response 
    }); 
    } 

    render() { 

    return (
     <div> 
     <FacebookLogin socialId="****************" 
         language="en_US" 
         scope="user_events,user_managed_groups" 
         responseHandler={(response) => this.handleFBResponse(response)} 
         xfbml={true} 
         fields="id,email,name" 
         version="v2.5" 
         className="facebook-login" 
         buttonText="Login With Facebook"/> 
     {this.state.user && <Group user={this.state.user}/>} 
     </div> 
    ); 
    } 
}