更新时避免死循环

Question

我必须更新项目状态并立即查看更改。当我在下面这样做时，我得到了一个无限循环。

 useEffect(() => {
    const playersInFight = gameData.characters.filter((x) =>
      fightData.currentPositionInfoDTOS.some((y) => y.entityId == x.id)
    );

    let orderedCharacters = addPlayers(
      playersInFight,
      fightData.currentPositionInfoDTOS,
      fightData.turnOrder
    );
    setAllCharacterCards(orderedCharacters);

  }, [fightData, gameData, fightInfo, allCharacterCards, allCharacters]);

我也试过这样：

  useEffect(() => {
    const playersInFight = gameData.characters.filter((x) =>
      fightData.currentPositionInfoDTOS.some((y) => y.entityId == x.id)
    );

    let orderedCharacters = addPlayers(
      playersInFight,
      fightData.currentPositionInfoDTOS,
      fightData.turnOrder
    );
    setAllCharacterCards(orderedCharacters);

  }, [fightData, gameData, fightInfo, allCharacterCards, allCharacters]);

  useEffect(() => {
    setAllCharacterCards(allCharacterCards);
  }, [allCharacterCards]);

多亏了我没有无限循环，但要看到我必须刷新页面的变化...... 我该如何解决这个问题？

更新： 这是我的回报：

return (
    <section>
        <div className="player-fight">
          {allCharacterCards ? (
            <div>
              {allCharacterCards.map((c, idx) => {
                return (
                  <li key={idx} className="player-fight-bottom__player-card">
                    <CardComponentPlayerCard
                      id={c.id}
                      name={c.name}
                      money={c.money}
                      health={c.health}
                      maxHealth={c.maxHealth}
                      mine={false}
                      description={c.description}
                      statuses={c.statuses}
                      image={c.photoPath}
                    />
                  </li>
                );
              })}
            </div>
          ) : (
            <LoadingSpinner />
          )}
        </div>
    </section>
  );

Answer 1

为避免无限循环，您需要从 useEffect 依赖项数组中删除 allCharacterCards。

 useEffect(() => {
    const playersInFight = gameData.characters.filter((x) =>
      fightData.currentPositionInfoDTOS.some((y) => y.entityId == x.id)
    );

    let orderedCharacters = addPlayers(
      playersInFight,
      fightData.currentPositionInfoDTOS,
      fightData.turnOrder
    );

    setAllCharacterCards([...orderedCharacters]);

  }, [fightData, gameData, fightInfo, allCharacters]);

解释（问题编辑后）

    setAllCharacterCards([...orderedCharacters]);

这应该可以解决您的问题。