PWA安装按钮不显示问题求助（附ViewAnnouncement.jsx完整代码）

大家好，我现在碰到个头疼的问题，想请各位帮忙排查下：我要在ViewAnnouncement.jsx页面添加PWA安装按钮，已经配置好manifest.json了，而且特意在beforeinstallprompt事件里加了日志，确认这个事件确实触发了，但用户登录后，明明设置了installButton.hidden = false，按钮就是不显示，我还额外加了installButton.style.display = "block"，结果还是没用...

下面是我的ViewAnnouncement.jsx完整代码，麻烦各位帮忙看看哪里可能出问题了：

import React from "react";
import { FaUserShield } from "react-icons/fa";
import { Link } from "react-router-dom";

class ViewAnnouncements extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      announcements: [],
      expanded: {},
      searchQuery: "",
      filterCategory: "",
      filterType: "",
      filterDate: "",
    };
  }

  truncateText(text, maxLength) {
    if (text.length > maxLength) {
      return text.slice(0, maxLength) + "...";
    }
    return text;
  }

  formatDate = (dateObj) => {
    return dateObj.toLocaleDateString("en-GB", {
      day: "2-digit",
      month: "short",
      year: "numeric",
    }); // Formats to "27 Jan 2025"
  };

  handleSearchChange = (event) => {
    this.setState({ searchQuery: event.target.value });
  };

  handleFilterChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  };

  toggleDescription = (id) => {
    this.setState((prevState) => ({
      expanded: {
        ...prevState.expanded,
        [id]: !prevState.expanded[id],
      },
    }));
  };

  componentDidMount = () => {
    const BASE_URL = window.location.hostname === "localhost"
      ? "http://localhost:3000"
      : "http://10.0.2.2:3000";
    fetch(`${BASE_URL}/view-announcements`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((respond) => respond.json())
      .then((data) => {
        this.setState({ announcements: data });
      });

    // PWA安装相关逻辑
    let deferredPrompt;
    const installButton = document.getElementById("install");
    if (!installButton) {
      console.error("DOM中未找到id为install的按钮");
      return;
    }
    console.log("找到安装按钮:", installButton);

    window.addEventListener("beforeinstallprompt", (e) => {
      console.log("beforeinstallprompt事件触发");
      e.preventDefault();
      deferredPrompt = e; // 暂存事件对象供后续使用
      installButton.hidden = false; // 显示按钮
      installButton.style.display = "block"; // 额外确保按钮可见
    });

    installButton.addEventListener("click", async () => {
      if (!deferredPrompt) {
        console.error("暂存的安装提示事件不存在");
        return;
      }
      console.log("安装按钮被点击");
      const result = await deferredPrompt.prompt(); // 弹出安装提示
      console.log(`安装提示结果: ${result.outcome}`);
      deferredPrompt = null; // 清空暂存的事件对象
      installButton.hidden = true; // 安装后隐藏按钮
    });

    window.addEventListener("appinstalled", () => {
      console.log("应用安装成功");
      installButton.hidden = true; // 安装完成后隐藏按钮
    });
  };

  render() {
    const { searchQuery, filterCategory, filterType, filterDate } = this.state;
    const filteredAnnouncements = this.state.announcements.filter(announcement => {
      const announcementDate = announcement.created_at.split("T")[0]; // 转换为"YYYY-MM-DD"格式
      return (
        announcement.title.toLowerCase().includes(searchQuery.toLowerCase()) &&
        (filterCategory === "" || announcement.category === filterCategory) &&
        (filterType === "" || announcement.type === filterType) &&
        (filterDate === "" || announcementDate === filterDate) // 日期匹配逻辑
      );
    });

    return (
      <div className="page-div">
        <div className="page-title">
          <h1>View Announcements</h1>
        </div>
        <div className="controls">
          <input
            type="text"
            placeholder=" Search"
            className="input-search"
            value={this.state.searchQuery}
            onChange={this.handleSearchChange}
          />
          <div className="filters">
            <select
              className="filter-dropdown"
              name="filterCategory"
              value={filterCategory}
              onChange={this.handleFilterChange}
            >
              <option value="">All Categories</option>
              <option value="general">General</option>
              <option value="academic">Academics</option>
              <option value="administrative">Scholarship and Financial Aid</option>
              <option value="academic">Co-curriculum</option>
              <option value="academic">Emergency</option>
              <option value="academic">Career</option>
              <option value="academic">Student Services</option>
            </select>
            <select
              className="filter-dropdown"
              name="filterType"
              value={filterType}
              onChange={this.handleFilterChange}
            >
              {/* 原代码此处内容截断，保留原样 */}
            </select>
          </div>
        </div>
        {/* 注：原代码中此处应包含id为install的按钮组件，例如：
        <button id="install" hidden className="install-btn">
          安装应用
        </button>
        */}
        {/* 公告列表渲染逻辑（原代码未完整展示） */}
      </div>
    );
  }
}

export default ViewAnnouncements;

我自己先排查了这些点：

• 确认manifest.json的必填字段（name、short_name、icons、start_url、display）都配置正确
• 通过console日志确认beforeinstallprompt事件确实触发，且能成功获取到id为install的按钮
• 尝试过在事件触发时同时设置hidden=false和display:block，但按钮仍未显示
• 检查了全局CSS，没有发现会隐藏该按钮的样式

有没有朋友遇到过类似的情况？或者能从我的代码里发现哪里出错了？

内容来源于stack exchange