回调函数中的 React 组件未被调用且未抛出任何错误

Question

Group 组件永远不会被调用，但如果我将回调函数中调用它的位置替换为 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 prop 是回调函数而不是渲染函数，因此一旦用户登录就会调用它。

如果要渲染Group组件，应该在组件状态保存状态，然后有条件地渲染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>
    );
  }
}

回调函数中的 React 组件未被调用且未抛出任何错误

React Component in Callback Function not called and not throwing any error

javascript

facebook-javascript-sdk

reactjs