Компонент класса в функциональный компонент

Question

Как мне преобразовать этот компонент класса в функциональный компонент? Я пытаюсь добиться подписки и отписки от firebase с помощью useEffect ()

class PostsProvider extends Component {
  state = { posts: [] }

  unsubscribeFromFirestore = null;

  componentDidMount = () => {
    this.unsubscribeFromFirestore = firestore
      .collection('posts')
      .onSnapshot(snapshot => {
        const posts = snapshot.docs.map(collectIdAndDocs);
        this.setState({ posts });
      });
  }

  componentWillUnmount = () => {
    this.unsubscribeFromFirestore();
  }

Answer 1

Так я бы конвертировал ваш компонент. Вы бы использовали функцию State () для создания своего состояния постов, а затем использовать useEffect довольно просто. Главное, в чем вы хотели бы убедиться, это то, что ваш массив зависимостей правильный, поэтому он не подписывается и не отписывается слишком часто (или недостаточно часто).

function PostsProvider(){
    const [posts,setPosts] = useState([]);
    useEffect(() => {
        const unsubscribeFromFirestore = firestore
        .collection('posts')
        .onSnapshot(snapshot => {
        const posts = snapshot.docs.map(collectIdAndDocs);
        setPosts(posts);
        });
        return () => {
            unsubscribeFromFirestore();
        }
    }, [])
}

Answer 2

Образец для вас, но я думаю, что вы должны изучить useEffect и useState в https://reactjs.org/docs/hooks-effect.html

import React, {useEffect, useState} from 'react';
import { View, Image, StyleSheet } from 'react-native';

function PostsProvider() {

  // Define State
  const [posts, setPosts] = useState(null)

  useEffect(() => {
    // Subcriber here
    this.unsubscribeFromFirestore = firestore
      .collection('posts')
      .onSnapshot(snapshot => {
        const posts = snapshot.docs.map(collectIdAndDocs);
        setPosts(posts)
      });
    return () => {
      // Unsubcriber here
      this.unsubscribeFromFirestore();
    }
  })


  return (
    <View style={styles.container}>
    </View>
  )
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1
  },
})

export default PostsProvider