Promise.all() inside useEffect in react returns 未定义项目数组

Question

它在获取之后工作，然后在 Promise.all() returns 未定义之后工作。 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 的新手，但我已经尝试了所有我能想到的方法，但它仍然返回未定义。

请让我知道我的 mistake/s is/are 是什么，我该如何修复它们。谢谢！

Answer 1

.console.log returns undefined，并且 Promise 解析为由 Promise 链中的最后一个 .then 编辑的值 return。

这里：

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

您正在获取填充的数据，console.log处理它，然后 return处理 undefined，因此那里的 Promise 将解析为 undefined。

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

你需要：

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])

Promise.all() inside useEffect in react returns 未定义项目数组

Promise.all() inside useEffect in react returns an array of undefined items

undefined

reactjs

use-effect

promise.all