在React.js中使用Sails.js全局变量及Reactstrap卡片组件数据管理问题

我来帮你梳理下这个场景下的API数据管理思路，结合你已经实现的进度条功能，咱们一步步解决问题：

首先，你需要在父组件里用React的useState来存储从第三方API拿到的卡片数据数组，这样才能动态渲染和更新Card组件。示例代码如下：

import { useState, useEffect } from 'react';
import { Card, CardBody } from 'reactstrap';
import CountdownProgressBar from './CountdownProgressBar'; // 你的进度条子组件

function CardContainer() {
  // 存储所有卡片数据的状态
  const [cardData, setCardData] = useState([]);
  // 加载状态，用来给用户反馈
  const [isLoading, setIsLoading] = useState(false);

把API请求逻辑封装成单独的函数，不管是组件初始化加载，还是倒计时结束后重载数据，都能复用这个逻辑。如果你的API支持单条数据查询，还可以写个单条更新的函数：

// 全局获取所有卡片数据
  const fetchAllCardData = async () => {
    setIsLoading(true);
    try {
      const res = await fetch('你的第三方API地址');
      if (!res.ok) throw new Error('数据请求失败');
      const data = await res.json();
      setCardData(data);
    } catch (err) {
      console.error('获取数据出错:', err);
      // 这里可以加用户可见的错误提示，比如弹出toast
    } finally {
      setIsLoading(false);
    }
  };

  // 单条卡片数据更新（如果API支持按ID查询）
  const fetchSingleCardData = async (cardId) => {
    try {
      const res = await fetch(`你的第三方API地址/${cardId}`);
      if (!res.ok) throw new Error('单条数据更新失败');
      const updatedCard = await res.json();
      // 替换数组中对应ID的卡片数据
      setCardData(prev => prev.map(card => 
        card.id === cardId ? updatedCard : card
      ));
    } catch (err) {
      console.error('更新单条数据出错:', err);
    }
  };

组件挂载时先调用一次全局获取函数，然后把对应的重载函数传给进度条子组件——这里分两种情况：

• 如果倒计时结束后需要全局刷新所有卡片，就把fetchAllCardData传给子组件
• 如果只需要刷新当前卡片的数据，就把fetchSingleCardData（带当前卡片ID）传过去

// 组件首次挂载时加载数据
  useEffect(() => {
    fetchAllCardData();
  }, []);

  return (
    <div className="d-flex flex-wrap gap-3 p-3">
      {/* 加载状态提示 */}
      {isLoading && <div className="w-100 text-center">加载中...</div>}
      
      {/* 渲染所有Card */}
      {!isLoading && cardData.map(card => (
        <Card key={card.id} style={{ width: '18rem' }}>
          <CardBody>
            {/* 显示卡片内容，根据你的API数据结构调整 */}
            <h5 className="card-title">{card.title}</h5>
            <p className="card-text">{card.content}</p>
            
            {/* 传递倒计时结束的回调到子组件 */}
            <CountdownProgressBar
              countdownSeconds={card.reloadTime || 60} // 假设API返回重载时间，或者用默认值
              onCountdownEnd={() => fetchSingleCardData(card.id)}
            />
          </CardBody>
        </Card>
      ))}
      
      {/* 空数据提示 */}
      {!isLoading && cardData.length === 0 && <div className="w-100 text-center">暂无卡片数据</div>}
    </div>
  );
}

export default CardContainer;

• 确保你的API返回的数据每个条目都有唯一ID，这样React才能正确识别列表项的变化（就是key={card.id}的作用）
• 如果你的API不支持单条查询，那倒计时结束后只能调用全局刷新函数，虽然体验差点，但逻辑更简单
• 记得处理错误状态，不能只在控制台打日志，最好给用户显示友好的错误提示
• 如果进度条的倒计时时间是从API获取的，直接把card.reloadTime这类字段传给子组件就行

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