React中async/await获取图片URL后图片不显示问题求助

核心问题 #

你的代码里getCardImage函数没有正确处理异步逻辑：

• map(async deck => ...)会生成多个异步Promise，但函数没有等待这些Promise完成就直接返回原数组。
• await getCardImage(res)无效，因为getCardImage没有返回Promise，所以res2还是未填充img的原始数组。此时执行setDecks(res2)，组件渲染时deck.img是undefined；后续异步请求完成后虽然修改了数组的img属性，但没有触发React状态更新，不过console.log会在异步完成后打印出已赋值的结果。

另外，用crypto.randomUUID()作为组件key会导致每次渲染都生成新key，触发组件不必要的重新挂载，应该改用deck的唯一标识（比如deck.id）。

修改后的代码 #

const [decks, setDecks] = useState([]);
const [loading, setLoading] = useState(true);

// 重构getCardImage，返回Promise并保持数组不可变
async function getCardImage(decks) {
  // 用Promise.all等待所有图片请求完成
  return Promise.all(decks.map(async (deck) => {
    // 返回新对象，不修改原数组
    const img = await MagicApi.getCardImage(deck.commander);
    return { ...deck, img };
  }));
}

useEffect(() => {
  const gettingDecks = async (userInfo) => {
    const res = await UserApi.getDecks(userInfo);
    // 等待所有图片请求完成后得到带img的新数组
    const res2 = await getCardImage(res);

    setDecks(res2);
    setLoading(false);
  };
  gettingDecks({ id });
}, [id]); // 注意：这里要把id加入依赖数组，避免闭包问题

if (loading) return <div><h3>Fetching Your Commander Decks...</h3></div>

return (
  <Row>
    {decks.map(deck => (
      <Card key={deck.id}> {/* 改用deck的唯一标识作为key */}
        <CardImg
          alt="Card image cap"
          src={deck.img}
          style={{ height: 300 }}
          top
          width="50%"
        />
        <CardTitle><h3>{deck.commander}</h3></CardTitle>
        <CardBody>
          <p>{deck.colors}</p>
        </CardBody>
        <Button onClick={() => deleteDeck(deck)}>Delete</Button>
      </Card>
    ))}
  </Row>
);

关键修改点说明 #

1. 异步逻辑修复：

   • getCardImage改为async函数，内部用Promise.all等待所有图片请求完成，确保返回的数组每个元素都已填充img属性。
   • 每个迭代返回新的对象（{ ...deck, img }），不直接修改原数组，符合React状态不可变的原则。

2. 状态更新时机：

   • 确保await getCardImage(res)真正等待所有异步操作完成后，再将结果传给setDecks，这样组件首次渲染时deck.img就有正确的URL。

3. key值优化：

   • 替换crypto.randomUUID()为deck.id（假设deck有唯一id属性），避免组件不必要的重渲染，提升性能。

4. 依赖数组修正：

   • 将id加入useEffect的依赖数组，避免因闭包导致的旧值问题。

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