Я использую функциональный компонент, и мне нужно иметь возможность использовать 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';



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


useEffect работает немного по-другому. Он получает функцию, которая может вернуть функцию очистки.
Таким образом, ваш код может быть:
const Contact = ({
previousProgressBarNow,
setPreviousStepValue,
addPropsToCallback,
hasSuggestions,
showSMSOptInCheckbox,
params,
sendEnhancedTrackEvent
}) => {
// code
// This acts as componentDidMount
useEffect(() => {
sendEnhancedTrackEvent(enhanceableData);
}, []);
const ProvidersContainer = ({getProvidersData}) => {
const [pageNo, setpageNo] = useState(1);
useEffect(() => { // Component Did Mount
getProvidersData(pageNo);
}, []);
}
На самом деле вы ничего не делаете в своей
useEffect(), вы просто сразу убираете. Пробовали ли вы что-то туда записывать?