reactjs - Promise.all() inside useEffect in react 返回未定义项目的数组

Question

它在获取之后工作，然后在 Promise.all() 返回 undefined 之后工作。 Promise.allSettled() 也是如此。

function DrinksPage(props){
    const [drinkCard, setDrinkCard] = useState([]);

    var id = props.id;
   
    useEffect( () =>{
        var drinksPromises = 
            id.map( obj => {
                var id = obj.idDrink;
                
                fetch(`https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=`+ id)
                .then(res => res.json())
                .then(data => console.log(data)) //Returns what I want
            });
               
        Promise.all(drinksPromises).then(data => {setDrinkCard(data)}) 
    },[id])
    
    console.log(drinkCard); //Returns an array of undefined values

这可能是一个简单的问题，因为我是 React 的新手，但我已经尝试了所有我能想到的方法，但它仍然返回未定义。

请让我知道我的错误是什么，我该如何改正它们。谢谢!

Answer 1

.console.log 返回 undefined，Promise 解析为 Promise 链中最后一个 .then 返回的值。

这里:

.then(data => console.log(data)) //Returns what I want

您正在获取填充的数据，console.log对其进行处理，然后返回 undefined，因此那里的 Promise 将解析为 undefined.

您也没有在任何地方使用该 Promise。您应该从 .map 回调中返回它。

你需要:

useEffect(() => {
    const drinksPromises = id.map(obj =>
        fetch(`https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${obj.idDrink}`)
            .then(res => res.json())
    );
    Promise.all(drinksPromises).then(data => { setDrinkCard(data) })
}, [id])