reactjs - React Native UseEffect 卡在循环调用函数中

Question

我正在尝试根据用户的触摸事件更新状态，然后我使用 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 });
  }}>

标签： reactjsreact-nativestate

Answer 1

“useEffect”重新获取 pokemon 卡片，创建新的 pokemontSet 对象，该对象使用“新”选定的 pokemonSet.id 重新渲染对象。并且由于 selectedId 已更改，因此会触发效果。