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

Как преобразовать этот компонент класса в функциональный компонент? Я пытаюсь подписаться и отказаться от подписки на 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();
  }


reactjs react-functional-component react-hooks
person JCastillo    schedule 09.04.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вот как бы я преобразовал ваш компонент. Вы должны использовать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();
        }
    }, [])
}
person Zachary Haber    schedule 09.04.2020