React DataBar组件动态加载数据异常求助

1. 异步逻辑错误导致cardCount状态更新异常 #

你的DeckCheck组件中，useEffect里用forEach处理异步的cardCounter函数是错误的——forEach不会等待异步操作完成，所以setCardCount(cards)执行时，cards还是空数组。后续cardCounter完成后修改数组，但React无法感知数组引用未变的修改，导致状态更新不及时或数据丢失。

修复代码（DeckCheck.jsx）： #

useEffect(() => {
  const fetchCardCounts = async () => {
    if (!deck) return;
    // 用map生成Promise数组，通过Promise.all等待所有异步操作完成
    const cards = await Promise.all(deck.map(e => cardCounter(e)));
    setCardCount(cards);
  };
  fetchCardCounts();
}, [deck]);

2. DataBar未渲染cardCount数据 #

当前DataBar组件只有静态标签，没有将cardCount中的统计数据填充到对应位置。需要先统计各类卡牌数量，再渲染到页面。

修复代码（DataBar.jsx）： #

import React, { useEffect, useState } from "react";
function DataBar({ cardCount }) {
  const [stats, setStats] = useState({
    total: 0,
    planeswalker: 0,
    creature: 0,
    instant: 0,
    sorcery: 0,
    artifact: 0,
    enchantment: 0
  });

  useEffect(() => {
    if (!cardCount || !Array.isArray(cardCount)) return;
    
    // 根据cardCounter返回的结构统计各类卡牌数量（假设返回对象包含count和type字段）
    const calculateStats = () => {
      const total = cardCount.reduce((sum, card) => sum + card.count, 0);
      return {
        total,
        planeswalker: cardCount.filter(c => c.type.includes('Planeswalker')).reduce((sum, c) => sum + c.count, 0),
        creature: cardCount.filter(c => c.type.includes('Creature')).reduce((sum, c) => sum + c.count, 0),
        instant: cardCount.filter(c => c.type.includes('Instant')).reduce((sum, c) => sum + c.count, 0),
        sorcery: cardCount.filter(c => c.type.includes('Sorcery')).reduce((sum, c) => sum + c.count, 0),
        artifact: cardCount.filter(c => c.type.includes('Artifact')).reduce((sum, c) => sum + c.count, 0),
        enchantment: cardCount.filter(c => c.type.includes('Enchantment')).reduce((sum, c) => sum + c.count, 0)
      };
    };

    setStats(calculateStats());
  }, [cardCount]);

  return (
    <div className="dataBar">
      <ul>
        <li>Deck Total: {stats.total}</li>
        <li>Planeswalker: {stats.planeswalker}</li>
        <li>Creatures: {stats.creature}</li>
        <li>Instants: {stats.instant}</li>
        <li>Sorceries: {stats.sorcery}</li>
        <li>Artifacts: {stats.artifact}</li>
        <li>Enchantments: {stats.enchantment}</li>
      </ul>
    </div>
  );
}
export default DataBar;

3. 重置时未清空cardCount状态 #

clear函数中没有重置cardCount，导致清空卡组后DataBar仍显示旧数据，添加setCardCount(null)即可：

const clear = () => {
  setHolder("");
  setDeck(null);
  setCardDisplay([]);
  setCardCount(null); // 新增：重置cardCount状态
  document.getElementById("deckInput").value = "";
};

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