如何在Bubble.io中实现API响应成功后才显示按钮？

核心逻辑是通过状态管理控制复制按钮的显示/隐藏及启用状态，主要依赖三个关键状态：

• loading：标记API请求是否正在进行
• apiData：存储API成功返回的数据
• 按钮的显示状态可由前两个状态直接推导

以下是不同技术栈的实现代码：

React 示例 #

import { useState, useEffect } from 'react';

const App = () => {
  const [loading, setLoading] = useState(true);
  const [apiData, setApiData] = useState(null);

  // 发起API请求
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://your-api-endpoint.com/data');
        if (!response.ok) throw new Error('请求失败');
        const data = await response.json();
        setApiData(data.content); // 假设content是需要复制的目标字段
      } catch (err) {
        console.error(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  // 复制操作
  const handleCopy = () => {
    navigator.clipboard.writeText(apiData);
    // 可选：添加复制成功提示
  };

  return (
    <div>
      {loading ? (
        <p>加载中...</p>
      ) : apiData ? (
        <div>
          <p>{apiData}</p>
          {/* 仅API成功返回数据时显示按钮 */}
          <button onClick={handleCopy}>复制内容</button>
        </div>
      ) : (
        <p>数据加载失败</p>
      )}
    </div>
  );
};

export default App;

Vue 3 示例 #

<template>
  <div>
    <p v-if="loading">加载中...</p>
    <div v-else-if="apiData">
      <p>{{ apiData }}</p>
      <button @click="handleCopy">复制内容</button>
    </div>
    <p v-else>数据加载失败</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const loading = ref(true);
const apiData = ref(null);

onMounted(async () => {
  try {
    const response = await fetch('https://your-api-endpoint.com/data');
    if (!response.ok) throw new Error('请求失败');
    const data = await response.json();
    apiData.value = data.content;
  } catch (err) {
    console.error(err);
  } finally {
    loading.value = false;
  }
});

const handleCopy = () => {
  navigator.clipboard.writeText(apiData.value);
};
</script>

原生 JavaScript 示例 #

<!DOCTYPE html>
<html>
<body>
  <div id="content-wrap">
    <p>加载中...</p>
  </div>

  <script>
    let loading = true;
    let apiData = null;
    const container = document.getElementById('content-wrap');

    // 发起API请求
    async function fetchTargetData() {
      try {
        const response = await fetch('https://your-api-endpoint.com/data');
        if (!response.ok) throw new Error('请求失败');
        const data = await response.json();
        apiData = data.content;
      } catch (err) {
        console.error(err);
      } finally {
        loading = false;
        renderPageContent();
      }
    }

    // 渲染页面内容
    function renderPageContent() {
      container.innerHTML = '';
      if (loading) {
        container.innerHTML = '<p>加载中...</p>';
        return;
      }
      if (apiData) {
        const contentEl = document.createElement('p');
        contentEl.textContent = apiData;
        const copyBtn = document.createElement('button');
        copyBtn.textContent = '复制内容';
        copyBtn.addEventListener('click', () => {
          navigator.clipboard.writeText(apiData);
        });
        container.appendChild(contentEl);
        container.appendChild(copyBtn);
      } else {
        container.innerHTML = '<p>数据加载失败</p>';
      }
    }

    // 页面初始化时触发请求
    fetchTargetData();
  </script>
</body>
</html>

关键注意点 #

• 务必在API请求的finally块中更新loading状态，避免请求失败后按钮一直隐藏
• 复制功能依赖navigator.clipboard，需确保页面在HTTPS环境下运行（localhost除外）
• 若API返回空数据，可根据业务需求调整按钮的显示/禁用逻辑

内容的提问来源于stack exchange，提问作者Akshar Prajapati