小编Tar*_*ngh的帖子

我会尽量说得清楚。我也询问过相关问题，但没有得到令人信服的答复。
我使用React和firebase进行托管。
另外，我将firebase Web API 密钥存储在我的.env文件中。
我使用 Firebase CLI 设置 Firebase 托管，并选择根据合并或拉取请求自动部署。
安装完成后，在我的工作目录中创建了一个.github包含文件的文件夹。.yml

   .github
      - workflows
          -firebase-hosting-merge.yml
          -firebase-hosting-pull-request.yml

因此，现在当我通过运行手动将项目（无需推送到 GitHub）部署到 firebase 时，firebase deploy一切正常，并且我的应用程序已启动并运行。
然而，当我进行更改并将更改推送到 Github 时。触发 Github 操作并开始自动部署到 firebase 进程。构建通过了所有检查。

但是，当我访问托管 URL 时，控制台中出现错误，提示Your API key is invalid, please check you have copied it correctly.
我尝试了一些解决方法，例如将我的 Firebase Web API 密钥存储到 Github 机密中并在我的.yml文件中访问它。

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools
 
name: Deploy …

我花了一天时间解决这个问题，但找不到解决方案。如果有人可以帮忙的话请。

所以我在 React 中制作了一个加密货币跟踪器。我设法创建了一个显示多种货币的表格，以及一个列，我在其中根据已保存在 javascript 文件中的 JSON 数据呈现各种货币的 Apexchart，即我没有对 API 进行任何调用来获取数据。我已经有了静态数据。我只是以表格的形式呈现静态数据。

现在的问题是页面的加载时间。由于我需要渲染所有货币的 apexcharts（我总共显示 100 种），显示它们会降低用户体验。

为了改善用户体验，我想添加占位符文本“正在加载...”，只有当 apexchart 加载完成后，我才想显示图表。

下面是我的图形组件，负责加载我的 apexchart。

import Chart from 'react-apexcharts';
import { ChartData } from '../data/ChartData';

class Graph extends Component {
  state = {
    options: {
      stroke: {
        width: 1.7,
      },
      grid: {
        show: false,
      },
      datalabels: {
        enabled: false,
      },
      tooltip: {
        enabled: false,
      },
      chart: {
        animations: {
          enabled: false,
        },
        toolbar: {
          show: false,
        },
        zoom: {
          enabled: false,
        },
      },
      yaxis: …