無法在回圈中執行setter

我正在嘗試撰寫一個英雄任務型別的腳本。

我們在其中瀏覽了一系列事件。玩家要么移動，要么面對敵人并開始戰斗。

所以我寫了我的腳本。任務和閱讀從頭到尾都很好。

然后，我對自己說，在繼續之前，我要做一個測驗，在第一場戰斗中，英雄的生命橋降為零以測驗游戲結束情況。

所以在 FightHandle 函式中，我將我的英雄的生命值降為零。

但在我的回圈中，這并沒有被考慮在內，英雄的生命值一直保持在 10 點，而在任務期間，他通過戰斗階段 X。

我做了很多測驗，但我沒有看到我的錯誤在哪里逃脫了我......

import React, { useEffect, useState } from "react";
import { character } from "./assets/character/character";

export default function Quest({ quest }) {
  const [player, setPlayer] = useState(character.player);

  const startQuest = (quest) => {
    const nbAction = quest.action.length;

    let i = 1;
    const timer = setInterval(() => {
      let action = quest.action[i];

      console.log("Life point", player.life);

      if (player.life > 0) {
        if (i === nbAction) {
          clearInterval(timer);
          endQuest();
        } else {
          if (action === "move") {
            console.log("player movement");
          } else {
            eventHandler(action);
          }
        }
      } else {
        console.log("GAME OVER");
        clearInterval(timer);
      }
      i  ;
    }, 500);
  };

  const eventHandler = (action) => {
    console.log(`Interaction with the element: ${action}`);

    const eventType = character[action].type;

    if (eventType === "statiqueMonster" || eventType === "monster") {
      const eventResolution = fightHandle(player, action);

      if (eventResolution === false) {
        console.log("GAME OVER");
      }
    }
  };

  const fightHandle = (player, action) => {
    console.log("!!!!!!!---FIGHT---!!!!!!!");
    setPlayer((s) => ({ ...s, life: 0 })); 

    if (player.life === 0) {
      return false;
    }
  };

  const endQuest = () => {
    console.log(player);
    console.log("fin de la quête", quest.name);
  };

  useEffect(() => {
    startQuest(quest);
  }, []);

  return (
    <div>
      <h1>Quest</h1>
    </div>
  );
}

uj5u.com熱心網友回復：

使用 useRef 代替：

import React, { useEffect, useState } from "react";
import { character } from "./assets/character/character";

export default function Quest({ quest }) {
  //const [player, setPlayer] = useState(character.player);

  const playerRef = useRef(character.player);

  const startQuest = (quest) => {
    const nbAction = quest.action.length;

    let i = 1;
    const timer = setInterval(() => {
      let action = quest.action[i];

      console.log("Life point", player.life);

      if (playerRef.current.life > 0) {
        if (i === nbAction) {
          clearInterval(timer);
          endQuest();
        } else {
          if (action === "move") {
            console.log("player movement");
          } else {
            eventHandler(action);
          }
        }
      } else {
        console.log("GAME OVER");
        clearInterval(timer);
      }
      i  ;
    }, 500);
  };

  const eventHandler = (action) => {
    console.log(`Interaction with the element: ${action}`);

    const eventType = character[action].type;

    if (eventType === "statiqueMonster" || eventType === "monster") {
      const eventResolution = fightHandle(player, action);

      if (eventResolution === false) {
        console.log("GAME OVER");
      }
    }
  };

  const fightHandle = (player, action) => {
    console.log("!!!!!!!---FIGHT---!!!!!!!");
    //setPlayer((s) => ({ ...s, life: 0 })); 
    playerRef.current = {...playerRef.current, life: 0};
    if (player.life === 0) {
      return false;
    }
  };

  const endQuest = () => {
    console.log(player);
    console.log("fin de la quête", quest.name);
  };

  useEffect(() => {
    startQuest(quest);
  }, []);

  return (
    <div>
      <h1>Quest</h1>
    </div>
  );
}

標籤：javascript 反应 循环 状态

上一篇：Python：將選擇陳述句簡化為使用回圈

下一篇：Javascript如何實作n維以非遞回方式removeOne