我正在使用继承的代码库开发React应用。

在此组件文件中： index.jsx 我已导入：

import { CLicksAverage } from '../../Components/Averages';

然后在 index.jsx 文件中，我有以下内容：

} else if (attribute === 'Clicks') {
        chart = <ClicksAverage />;

“ CLicksAverage”是对具有以下结构的 clicks.jsx （不扩展组件）的引用：

 const ClicksAverage = ({ type }) => {

    if (type === 'Daily' || type === 'Today') {

      console.log('Daily or Today');   

    } else if (type === 'Weekly' || type === 'Monthly') {

        if (type === 'Weekly') {

        console.log('Weekly');   

        } else {

        console.log('Monthly');       

        }

    } else if (type === 'Yearly') {

        console.log('Monthly');

    }

}

目的 我正在记录事件。在这种情况下，单击“每周”，“每月”和“每年”选项卡。页面加载时，默认值为“每周”。

问题 react应用在初始加载时点击ClicksAverage三次。因此，它记录：

   > Weekly
   > Weekly
   > Weekly

在初始加载后，它的行为正常，每次单击都排队到所记录内容的唯一实例。例如：

> Yearly
> Weekly
> Monthly
> Yearly
> Yearly
> etc...

我尝试过的内容 我需要强制将初始负载记录为每周一次（或完全不记录）。然后允许用户正常单击每周选项卡并记录该事件。我所拥有的感觉就像一团簇-必须有更好的方法。

对于单击“每周”选项卡时，请执行以下操作：

 if (type === 'Weekly') {

        trackWeeklyClicksTab();  

   } else {

在trackWeeklyClicks中，我有一个局部变量loadCount，该变量在静态类中初始化为零。这说明了ClicksAverage的三个负载。但是我不喜欢。不管负载数如何，该代码都应该起作用。在这种情况下，我还有一个问题，就是浪费了每周点击的日志记录（仅记录一次）。

  trackWeeklyClicksTab() {
    if (this.loadCount < 3) {
      this.weeklyClicksrunonce();
      this.loadCount += 1;
    } else {
      console.log('Weekly Clicks Tab');
    }
  }

  weeklyClicksrunonce() {
    console.log('Weekly Clicks Tab');
    this.weeklyClicksrunonce = () => {};
  }

建议表示赞赏。