React Native UseEffect 卡在循环调用函数中答案

【问题标题】：React Native UseEffect stuck in loop calling functionReact Native UseEffect 卡在循环调用函数中
【发布时间】：2021-10-12 20:48:46
【问题描述】：

我正在尝试根据用户的触摸事件更新状态，然后我使用 useEffect 尝试调用一个函数来更新另一个状态，以便可以使用导航将其传递到下一个屏幕。

问题是我陷入了一个循环，我不知道为什么。只有在 selectedSet 更新时才应该调用它。

  const [pokemonCards, setPokemonCards] = useState([]);
  const [selectedSet, setSelectedSet] = useState("");

  useEffect(() => {
    const getPokemonCards = () => {
      PokemonTCG.findCardsByQueries({ q: 'set.id:' + selectedSet, pageSize: 10 }).then(
        (cards) => {
          console.log("cards: ", cards)
          setPokemonCards(cards);
        }
      )
    }
    getPokemonCards();
  }, [selectedSet]);

...

  <TouchableHighlight key={pokemonSet.id} onPress = {() => {
    setSelectedSet(pokemonSet.id);
    navigation.navigate("SetDetails", { setID: pokemonSet.id, pokemonSetDetails: pokemonSet, pokemonCards: pokemonCards });
  }}>

【问题讨论】：

标签： reactjs react-native state

【解决方案1】：

“useEffect”重新获取 pokemon 卡片，创建新的 pokemontSet 对象，该对象使用“新”选定的 pokemonSet.id 重新渲染对象。并且因为 selectedId 被改变了，所以效果被触发了。

【讨论】：

本例中使用useEffect的正确方法是什么？