Javascript 回调函数中的React组件未调用且未引发任何错误

组组件从未被调用，但是如果我用

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;

import React，{Component}来自'React'；
从“react facebook登录组件”导入{FacebookLogin}；
从“./Groups”导入组
类登录扩展组件{
渲染（）{
返回(
}
xfbml={true}
fields=“id、电子邮件、姓名”
version=“v2.5”
className=“facebook登录”
buttonText=“使用Facebook登录”/>
);
}
}
导出默认登录；

您的问题是

responseHandler

prop是一个回调函数，而不是渲染函数，因此用户登录后将调用它

如果要渲染组组件，应在组件状态下保存状态，然后有条件地渲染组组件

诸如此类：

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>
    );
  }
}

类登录扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户：空
};
}
HandlefB响应（响应）{
这是我的国家({
用户：回复
});
}
渲染（）{
返回(
this.handleFBResponse（response）}
xfbml={true}
fields=“id、电子邮件、姓名”
version=“v2.5”
className=“facebook登录”
buttonText=“使用Facebook登录”/>
{this.state.user&&}
);
}
}

您的问题是

responseHandler

prop是一个回调函数，而不是渲染函数，因此用户登录后将调用它

如果要渲染组组件，应在组件状态下保存状态，然后有条件地渲染组组件

诸如此类：

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>
    );
  }
}

类登录扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户：空
};
}
HandlefB响应（响应）{
这是我的国家({
用户：回复
});
}
渲染（）{
返回(
this.handleFBResponse（response）}
xfbml={true}
fields=“id、电子邮件、姓名”
version=“v2.5”
className=“facebook登录”
buttonText=“使用Facebook登录”/>
{this.state.user&&}
);
}
}

您在控制台上有任何异常吗？控制台上没有异常组组件做什么？你能分享组组件的代码吗？我已经将组组件简化为控制台日志中可以想象到的最简单的组件。单击登录按钮，Facebook会将用户重定向到不同的URL，因此我相信这就是原因。你在控制台有任何异常吗？控制台上没有异常组组件做什么？你能分享Group component的代码吗？我已经将Group component简化为控制台日志中可以想象到的最简单的组件。单击登录按钮，Facebook会将用户重定向到不同的URL，因此我相信这就是原因