如何在ReactJS中将Firebase Auth类组件生命周期转换为Hooks useEffect?

时间:2019-10-04 05:52:05

标签: reactjs firebase lifecycle use-effect

im试图将以下类组件的firebase auth生命周期转换为hook的useEffect方法。

class App extends React.Component {
state = {
    user: null
};

unsubscribeFromAuth = null;

componentDidMount(){
    this.unsubscribeFromAuth = firebase.auth().onAuthStateChanged((user) => {
        this.setState({user: user});
    });
}
componentWillUnmount(){
    this.unsubscribeFromAuth();
}

}

我试图用以下代码进行转换,它似乎可以正常工作,但是我不确定这是否是正确的实现。有一条警告说“用户”已分配一个值,但从未使用过。我应该将第2行更改为:$const [ , setUser] = useState(null);

const App = () => {
const [user, setUser] = useState(null);
const unsubscribeFromAuth = useRef(null); 
useEffect(() => {
    unsubscribeFromAuth.current = auth.onAuthStateChanged((user) => {
        setUser(user);
        console.log(user);
    })
    return () => {
        unsubscribeFromAuth();
    }
}, []);        

}

1 个答案:

答案 0 :(得分:1)

创建一个custom hook以返回经过身份验证的用户。

此钩子可以在需要经过身份验证的<text text-anchor="middle" dominant-baseline="middle" style="transform:translate(50%,98%) scale(.2); font:700 13px sans-serif;fill:#deba78" >24.2%</text> 信息的任何功能组件中重复使用。

user