如何使useEffect（）像componentDidMount（）一样起作用？

Question

我正在使用功能组件，并且需要能够使用componentDidMount（）。在网上我发现，通过react挂钩，您可以将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';

Answer 1

useEffect的工作原理有所不同。它接收一个函数，该函数可以返回清除函数。因此，您的代码可能是：const Contact = ({  previousProgressBarNow,  setPreviousStepValue,  addPropsToCallback,  hasSuggestions,  showSMSOptInCheckbox,  params,  sendEnhancedTrackEvent}) => {  // code  // This acts as componentDidMount  useEffect(() => {    sendEnhancedTrackEvent(enhanceableData);  }, []);

Answer 2

const ProvidersContainer = ({getProvidersData}) => { const [pageNo, setpageNo] = useState(1); useEffect(() => { // Component Did Mount  getProvidersData(pageNo); }, []);}