javascript - 回调函数中的 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>
    );
  }
}