Как использовать useEffect () как componentDidMount ()? - PullRequest
Новая
       13

Как использовать useEffect () как componentDidMount ()?

0 голосов
/ 18 апреля 2019

Я использую функциональный компонент, и мне нужно иметь возможность использовать componentDidMount ().В Интернете я обнаружил, что с помощью перехватчиков реагирования вы можете использовать useEffect () в качестве componentDidMount () в функциональных компонентах.Тем не менее, это не работает, как я думал, что будет.Я думал, что при загрузке страницы это будет срабатывать, но это не так.Кто-нибудь знает, как заставить useEffect действовать как componentDidMount? 

const Contact = ({
  previousProgressBarNow,
  setPreviousStepValue,
  addPropsToCallback,
  hasSuggestions,
  showSMSOptInCheckbox,
  params,
  sendEnhancedTrackEvent
}) => {
  const enhanceableData = {
    name: 'Item Clicked',
    properties: {
      ...defaultProps,
      activityLocation: 'Member - RAQ Contact Details - useEffect',
      description: 'SMS Opt-In Checkbox',
      autopopulated: true,
      changeType: 'Add',
      href: process.env.IS_BROWSER && typeof window !== 'undefined' ?
          window.location.href : undefined
    }
  };

  // This acts as componentDidMount
  useEffect(() => {
    return () => {
      sendEnhancedTrackEvent(enhanceableData);
    }
  }, []);

Я пытался просто сделать это, но затем он создает бесконечные циклы, и я получаю ошибку: 

  useEffect(() => {
    sendEnhancedTrackEvent(enhanceableData);
  });

Ида я его импортировал: 

import React, { useState, useEffect } from 'react';

Ответы [ 2 ]

1 голос
/ 17 июня 2019 
const ProvidersContainer = ({getProvidersData}) => {
 const [pageNo, setpageNo] = useState(1);
 useEffect(() => { // Component Did Mount
  getProvidersData(pageNo);
 }, []);
}
1 голос
/ 19 апреля 2019

useEffect работает немного по-другому. Он получает функцию, которая может возвращать функцию очистки.

Итак, ваш код может быть: 

const Contact = ({
  previousProgressBarNow,
  setPreviousStepValue,
  addPropsToCallback,
  hasSuggestions,
  showSMSOptInCheckbox,
  params,
  sendEnhancedTrackEvent
}) => {
  // code

  // This acts as componentDidMount
  useEffect(() => {
    sendEnhancedTrackEvent(enhanceableData);
  }, []);
...