img src 在对象数组中，使用异步等待，但图像不会出现在 React 应用程序中

Question

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

function getCardImage(decks){
        decks.map(async(deck)=>{
            deck.img = await MagicApi.getCardImage(deck.commander);
        })
        return decks;
    }
    
    useEffect(()=>{
        const gettingDecks = async (userInfo) => {
            const res = await UserApi.getDecks(userInfo);
            const res2 = await getCardImage(res);

            setDecks(res2);
            setLoading(false);
        }
        gettingDecks({id})
    },[]);

if(loading) return <div><h3>Fetching Your Commander Decks...</h3></div>
    
    console.log(decks)
        return(
        
            <Row>
                
                {decks.map(deck => {
                    return (
                    <Card key={crypto.randomUUID()}>
                            
                            <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>
        )

当我查看开发工具中的组件时，它说我的 img src 未定义。但是当我在返回之前 console.log 时，它会显示来自 api 的 img url。

尝试用谷歌搜索一段时间，但找不到任何东西。我希望图像在渲染时显示。

预先感谢您的帮助！

Answer 1

您不会等待

decks.map(...)

返回的任何承诺，并且您还将丢弃结果（

Array#map

创建一个新数组而不影响原始数组）。

您可以使用

for...of

循环代替（这可能更容易理解）：

const gettingDecks = async (userInfo) => {
    const decks = await UserApi.getDecks(userInfo);
    for (const deck of decks)
        deck.img = await MagicApi.getCardImage(deck.commander);
    setDecks(decks);
    setLoading(false);
}