reactjs - 如何使用侦听器重构此 React 组件以使组件正常工作？

Question

我一直在按照本教程将我的 React 应用程序连接到 Firebase。但是，我想重构“withAuthentication”组件以使其正常工作，就像我的应用程序的其余部分一样。

我按照本教程获得的组件是：

const withAuthentication = Component => {

  class WithAuthentication extends React.Component {
  
    constructor(props) {
      super(props);

      this.state = {
        authUser: null,
      };
    }

    componentDidMount() {
      
      this.listener = this.props.firebase.onAuthUserListener(

        authUser => { // Valid user
          this.setState({ authUser });
        },

        () => { // Invalid user
          this.setState({ authUser: null });
        },

        () => { // No user
          this.setState({ authUser: null });
        }

      );
        
        
    }
 
    componentWillUnmount() {
      this.listener();
    }

  
    render() {
    
      return (
        <AuthUserContext.Provider value={this.state.authUser}>
          <Component {...this.props} />
        </AuthUserContext.Provider>
      );
    }
  }

  return withFirebase(WithAuthentication);
};

export default withAuthentication;

要将其转换为功能性，到目前为止，我有：

const withAuthentication = Component => {

  const WithAuthentication = ({firebase, props}) => {

    const [authUser, setAuthUser] = useState(null);

    useEffect(() => {

      const listener = firebase.onAuthUserListener(

        authUser => { // Valid user
          setAuthUser(authUser);
        },

        () => { // Invalid user
          setAuthUser(null);
        },

        () => { // No user
          setAuthUser(null);
        }

      );
          
    }, [firebase])
  
    return (
      <AuthUserContext.Provider value={authUser}>
        <Component {...props} />
      </AuthUserContext.Provider>
    );

  }

  return withFirebase(WithAuthentication);
};

export default withAuthentication;

首先，我不确定这是否是正确的方法——如果不是，很高兴被告知！其次，原始组件具有移除侦听器的 componentWillUnmount() 函数 - 我不确定如何在我的函数版本中执行此操作。任何人都可以建议吗？

标签： reactjs

Answer 1

您需要在 useEffect 中添加一个返回，如本文所述

useEffect(() => {

  const listener = firebase.onAuthUserListener(

    authUser => { // Valid user
      setAuthUser(authUser);
    },

    () => { // Invalid user
      setAuthUser(null);
    },

    () => { // No user
      setAuthUser(null);
    }

  );
      return (() => listener())
}, [firebase])