如何让 useEffect() 像 componentDidMount() 一样工作？答案

【问题标题】：How to have useEffect() act like componentDidMount()?如何让 useEffect() 像 componentDidMount() 一样工作？
【发布时间】：2019-09-09 05:47:39
【问题描述】：

我正在使用一个功能组件，我需要能够使用 componentDidMount()。网上发现通过react hooks可以在功能组件中使用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';

【问题讨论】：

你实际上并没有在你的useEffect() 中做任何事情，你只是在立即清理。你试过在那里记录一些东西吗？

标签： javascript reactjs react-hooks

【解决方案1】：

useEffect 的工作方式有点不同。它接收一个函数，该函数可以返回一个清理函数。

所以你的代码可能是：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：