如何立即為 function React 更新 useState

Question

我創建了一個 function 來計算兩個選定的神奇寶貝之間的贏家。 但是，它沒有使用新選擇的選項，而是使用以前選擇的選項。 我注意到這是因為 useState 沒有立即更新，所以我 go 如何解決這個問題？

這是我的贏家 function：

function selectedWinner(){

console.log(pokemonName+' '+pokeOneTotal);
console.log(pokemonName2+' '+pokeTwoTotal);
if(pokeOneTotal>pokeTwoTotal){
    setPokemonWinner(pokemonName);
}else if(pokeOneTotal<pokeTwoTotal){
    setPokemonWinner(pokemonName2);
}else{
    setPokemonWinner("Draw");
}

}

我已經設置它以便在不同的 select 函數中調用它，這些函數是點擊函數，這里是一個例子：

 function optionOneSelected(){
   
    console.log('selected');
    axios.get('https://pokeapi.co/api/v2/pokemon/'+ pokemonOne.current.value)
    .then((res)=>{

      let data=res.data;
      console.log(data);

      let type = data.types[0].type.name;
      let id = data.id;
      let height= data.height;
      let weight = data.weight;
      let name = data.forms[0].name;
      let hp = data.stats[0].base_stat;

      //console.log(type)

      setPokemonType(type);
      setPokemonId(id);
      setPokemonHeight(height);
      setPokemonWeight(weight);
      setPokemonName(name);
      setPokemonHp(hp);

        let sum=0;
        sum= data.stats[0].base_stat+ data.stats[1].base_stat+ data.stats[2].base_stat+ data.stats[3].base_stat+data.stats[4].base_stat+data.stats[5].base_stat;
        setPokeOneTotal(sum);


          let pokemonOneDataList = [
            data.stats[0].base_stat, data.stats[1].base_stat, data.stats[2].base_stat, data.stats[3].base_stat,data.stats[4].base_stat,data.stats[5].base_stat
          ];

          let labels = [
              'hp', 'Attack', 'Defense', 'Special Attack', 'Special Defense', 'Speed'
          ];

          setPokemonOneData(pokemonOneDataList);
          setDataLabels(labels);
          selectedWinner();
          
      


    })

}

Answer 1

您可以使用pokeOneTotal和pokeTwoTotal作為依賴項調用useEffect 。 每當pokeOneTotal或pokeTwoTotal更新時，它會觸發useEffect

useEffect(() => {
   if(pokeOneTotal>pokeTwoTotal){
       setPokemonWinner(pokemonName);
   }else if(pokeOneTotal<pokeTwoTotal){
       setPokemonWinner(pokemonName2);
   }else{
       setPokemonWinner("Draw");
   }
}, [pokeOneTotal, pokeTwoTotal])

Answer 2

在 React 中設置 state 就像一個異步 function。
這意味着當您設置 state 並在其后放置一個console.log時，它可能會在 state 實際完成更新之前運行。

這就是為什么我們有useEffect ，一個內置的 React 鈎子，當它的一個依賴項發生變化時激活回調。

例子：

useEffect(() => {
   // Whatever we want to do after the state has been updated.
}, [state])

此console.log僅在 state 完成更改並發生渲染后才會運行。

• 注意：示例中的“狀態”可與您正在處理的任何 state 部分互換。

查看文檔以獲取更多信息。

Answer 3

任何一個：

• 將新值作為 arguments 傳遞給selectedWinner ，而不是從 state 讀取。
• 將對selectedWinner的調用移動到一個單獨的useEffect掛鈎中，該掛鈎將那些 state 變量作為依賴項（因此當且僅當其中任何一個發生變化時才會調用它）。