Javascript React钩子在USEFACTION调用后更改asycn函数内数组的状态

我这里有三种状态，我在一个“异步函数”中更改它们。其中两个完全改变了，但也有一个数组状态，它没有任何变化。我真的很想知道为什么会这样

function RandomCocktail () {
    const [item, setItem] = useState('');
    const [drinkImage, setDrinkImage] = useState('');
    const [ingredients, setIngredients] = useState([]);

    function sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    };

    async function DrinkChange() {
      setItem("Loading..");
      try {
        let res = await fetch('https://www.thecocktaildb.com/api/json/v1/1/random.php');
        let result = await res.json();
        console.log(result);
        await sleep(500);
        // Below two states changes perfectly
        setItem(result["drinks"][0]["strDrink"]);
        setDrinkImage(result["drinks"][0]["strDrinkThumb"]);
        let i = 1;
        let t = [];
        while(result["drinks"][0]["strIngredient"+i.toString()] !== null)
        {
          console.log(result["drinks"][0]["strIngredient"+i.toString()]);
          t.push({id: i, dr: result["drinks"][0]["strIngredient"+i.toString()]});
          i++;
        }
        //when it comes to changing the array state nothing happens
        setIngredients([...t]);
        console.log(t);
        //logs all the ingredients
        console.log(ingredients);
        //logs []
      } catch (error) {
        setItem('Error');
      }  
    };

    

    useEffect(() => {
      DrinkChange();
    },[]);
  
    return(
      <CocktailPage item={item} drinkImage={drinkImage}/>
    );  
}

export default RandomCocktail;

函数（）{
const[item，setItem]=useState（“”）；
常量[drinkImage，setDrinkImage]=使用状态（“”）；
常量[成分，设置成分]=使用状态（[]）；
功能睡眠（ms）{
返回新承诺（resolve=>setTimeout（resolve，ms））；
};
异步函数DrinkChange（）{
设置项（“加载…”）；
试一试{
let res=等待取数（'https://www.thecocktaildb.com/api/json/v1/1/random.php');
让result=wait res.json（）；
控制台日志（结果）；
等待睡眠（500）；
//下面两种状态完全不同
设置项（结果[“饮料”][0][“strDrink”]）；
setDrinkImage（结果[“饮料”][0][“strDrinkThumb”]）；
设i=1；
设t=[]；
while（结果[“饮料”][0][“StringCredit”+i.toString（）]！==null）
{
log（结果[“饮料”][0][“StringCredit”+i.toString（）]）；
t、 推送（{id:i，dr:result[“饮料”][0][“StringCredit”+i.toString（）]）；
i++；
}
//当涉及到更改阵列状态时，什么都不会发生
组分（[…t]）；
控制台日志（t）；
//记录所有成分
控制台日志（成分）；
//日志[]
}捕获（错误）{
setItem（'Error'）；
}  
};
useffect（（）=>{
DrinkChange（）；
},[]);
返回(
);  
}
导出默认值；

在react

setState

中，操作本质上是异步的，因此，如果在设置状态后立即尝试控制台日志，则可以获得以前的状态值

您的状态设置正确，只需在函数外部记录状态值即可打印更新的状态

import React, { useEffect, useState } from "react";

function RandomCocktail() {
  const [item, setItem] = useState("");
  const [drinkImage, setDrinkImage] = useState("");
  const [ingredients, setIngredients] = useState([]);

  function sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }

  async function DrinkChange() {
    setItem("Loading..");
    try {
      let res = await fetch(
        "https://www.thecocktaildb.com/api/json/v1/1/random.php"
      );
      let result = await res.json();
      await sleep(500);
      // Below two states changes perfectly
      setItem(result["drinks"][0]["strDrink"]);
      setDrinkImage(result["drinks"][0]["strDrinkThumb"]);
      let i = 1;
      let t = [];
      while (result["drinks"][0]["strIngredient" + i.toString()] !== null) {
        t.push({
          id: i,
          dr: result["drinks"][0]["strIngredient" + i.toString()],
        });
        i++;
      }
      //when it comes to changing the array state nothing happens
      setIngredients([...t]);
      //logs []
    } catch (error) {
      setItem("Error");
    }
  }

  console.log("ingredients", ingredients);

  useEffect(() => {
    DrinkChange();
  }, []);

  return(
    <CocktailPage item={item} drinkImage={drinkImage}/>
  );  
}

export default RandomCocktail;

import React，{useffect，useState}来自“React”；
函数（）{
const[item，setItem]=useState（“”）；
const[drinkImage，setDrinkImage]=useState（“”）；
常量[成分，设置成分]=使用状态（[]）；
功能睡眠（ms）{
返回新承诺（（resolve）=>setTimeout（resolve，ms））；
}
异步函数DrinkChange（）{
设置项（“加载…”）；
试一试{
让res=等待取回(
"https://www.thecocktaildb.com/api/json/v1/1/random.php"
);
让result=wait res.json（）；
等待睡眠（500）；
//下面两种状态完全不同
设置项（结果[“饮料”][0][“strDrink”]）；
setDrinkImage（结果[“饮料”][0][“strDrinkThumb”]）；
设i=1；
设t=[]；
while（结果[“饮料”][0][“StringCredit”+i.toString（）]！==null）{
t、 推({
id:我，
dr:result[“饮料”][0][“StringCredit”+i.toString（），
});
i++；
}
//当涉及到更改阵列状态时，什么都不会发生
组分（[…t]）；
//日志[]
}捕获（错误）{
设置项（“错误”）；
}
}
控制台日志（“成分”，成分）；
useffect（（）=>{
DrinkChange（）；
}, []);
返回(
);  
}
导出默认值；

调用

console.log

在

setState

之后将始终记录当前渲染的状态，而不是更新的状态，直到下一次渲染才可用。谢谢。显然它正在改变