无法在循环中执行 setter

Question

我正在尝试编写英雄任务类型的脚本。

我们在其中浏览了一系列事件。要么玩家移动，要么面对敌人，战斗开始。

所以我写了我的剧本。求索，从头读到尾。

然后，我对自己说，在继续之前，我打算做一个测试，在第一场战斗中，英雄的生命桥梁降为零，以测试游戏结束的情况。

所以在 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>
  );
}

Answer 1

改为使用 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>
  );
}

无法在循环中执行 setter

Cannot execute a setter in a loop

javascript

state

loops

reactjs