Как преобразовать жизненный цикл компонента класса Firebase Auth в хуки useEffect в ReactJS? - PullRequest
Новая
       9

Как преобразовать жизненный цикл компонента класса Firebase Auth в хуки useEffect в ReactJS?

1 голос
/ 04 октября 2019

Я пытаюсь преобразовать жизненный цикл аутентификации Firebase следующего компонента класса в метод 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 Ответ

1 голос
/ 04 октября 2019

Создайте пользовательский хук для возврата аутентифицированного пользователя.

Этот хук может быть повторно использован в любом функциональном компоненте, которому требуется аутентифицированная user информация. 

function useAuthUser(props) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // no need for ref here
    const unsubscribeFromAuth = auth.onAuthStateChanged((user) => {
      setUser(user);
    })

    return () => {
      unsubscribeFromAuth();
    }
  }, []);

  return user; // return authenticated user
}

function App() {
  const user = useAuthUser(someProps);

  return <div>{user}</div>
}
...