React Google Analytics - 如何检查是否已初始化？

Question

我正在尝试实施 react-ga，但仅限于生产服务器（我有本地/开发和生产服务器）。

所以，我想在后台创建一个文本字段，其值保存在数据库中。

然后在前端，只有当我在数据库中有一个值时，我才初始化react-ga。

为了实现这一点，我正在 App.jsx 中尝试在 componentDidUpdate 中执行此操作。

我通过 :

在后台检索我所有的数据集

componentDidMount() {
    // I get my data in this.props.data_admin
    this.props.list_admin();
}

然后在 componentDidUpdate(prevProps, prevState) 中我检查 this.props.data_admin 是否设置且不为空，当我得到值时我想初始化 react-ga :

componentDidUpdate(prevProps, prevState, snapshot) {
    if (this.props.data_admin) {
        // this.props.data_admin.trackingNumber = UA-XXXXXXXXX
        ReactGA.initialize(this.props.data_admin.trackingNumber);
    }
}

但这会重复很多次（每次更新 App.jsx）。所以我应该在初始化之前检查它是否已经完成。如何检查 react-ga 是否已经初始化？

感谢您的帮助

Answer 1

我认为您不应该在 componentDidUpdate 中执行此操作，而应在 componentDidMount 中检索数据后执行此操作。

您的数据检索过程是对您的 backend/database 的异步调用，它应该 return 一个使用检索到的数据解析的 Promise。然后你可以初始化 react-ga.

componentDidMount() {
    // I am assuming this.props.list_admin() returns your data
    this.props.list_admin().then((data_admin) => {
      if (data_admin) {
        // data_admin.trackingNumber = UA-XXXXXXXXX
        ReactGA.initialize(data_admin.trackingNumber);
      }
    });
}

Answer 2

最后我做了什么：

我在 App.jsx 构造函数中调用了 this.props.list_admin(); 并创建了一个初始化为 false 的状态变量：

constructor(props) {
    super(props);

    this.state = {
        googleAnalyticsInitialized: false,
    };

    this.props.list_admin();
}

然后，在 componentDidupdate 中，我检查了 this.props.data_admin 中的值，如果 googleAnalyticsInitialized 为假。如果是，我使用从对 API 的调用中收到的 ID 初始化 Google Analytics：

componentDidUpdate(prevProps, prevState, snapshot) {
    if (this.props.data_admin && this.props.data_admin.idGoogleAnalytics && !this.state.googleAnalyticsInitialized) {
        ReactGA.initialize(this.props.data_admin.idGoogleAnalytics);
        this.setState({googleAnalyticsInitialized: true});
    }
}

感谢@Chukwuemeka Onyenezido 帮助我并指导我走上正确的道路。

Answer 3

我本来希望找到比这更好的答案，但我就是这么做了

try {
    console.log(theObject);
} catch(e) {}

不是很优雅，有点脏，我想更多地了解发生了什么，但这行得通。

背景故事

我正在尝试访问 reducer 中的商店并从 index.js 导入商店对象是我当前的 "solution"

React Google Analytics - 如何检查是否已初始化？

React Google Analytics - How to check if initialized?

reactjs

react-ga