Reactjs 我想将状态设置为true，直到每一张卡片都生成并在多姆中呈现

没什么可看的. 然后不确定具体问题，如果你制作一个沙箱或一些东西来查看就容易多了.可以在Codesandbox或PlayCode上制作，甚至不需要在PlayCode上登录.

我要做的第一件事，我认为这通常是最佳实践，就是将提取与状态设置分开.它使做出更改变得更容易，尤其是在React中，您必须遵循hook规则.您可以在React文档上查找挂钩规则，我认为它解释得相当好.

在这种情况下，特别是有时您有条件地调用hook，这违反了hook的规则，因此它不会可靠地工作.

...
if (filter) {
  setData((data) => 
    data.filter((item) => 
...

for循环中也有对setData的调用，每次渲染时需要调用相同的次数.

因此，您可以进行许多更改，以便代码遵循挂钩规则.但一般来说，如果您考虑如何组织和拆分代码，您应该将代码置于可以更轻松满足挂钩规则或任何框架中的任何规则的位置.

在这里，在某些情况下，将神奇宝贝的获取与状态设置分开是有益的.所以您可以这样思考:您想要一个旨在根据某些输入获取一些数据的函数，并且理想情况下该函数始终以相同可靠的格式返回数据.在这种情况下，它可能是一个神奇宝贝数组，或者一个错误，或者一个神奇宝贝或错误的数组，或者一个仅代表成功获取的数组，或者其他事情，但这取决于你想要如何设计它.

不幸的是，在React中，您无法使用Deliverc效果函数args，因此您仍然需要在您创建的Deliverc函数中设置状态，这已经很棒了.但您仍然可以分离提取逻辑，并且您必须使挂钩工作.

重要的是您知道期望什么数据，并且在这里，在reaction的上下文中，任何条件逻辑都应该发生在状态设置器函数中.因此，在您的示例中，获取逻辑可能看起来像

async function fetchAllPokemonData() {
  async function getData() {
    let results = [];
    for (let i = 0; i < pokemon.length; i++) {
      const res = await fetch(pokemon[i].url)
        .catch((e) => console.log(e))
        .then((res) => {
          //any processing you want to do on result
          return res;
        });
    }
  }
  const data = getData();
  setData(data);
}

因此getData函数只是返回成功获取的神奇宝贝array.设置状态一次，set State函数将始终运行，无论获取的结果如何.

如果您想稍微简化代码，可以使用Promise.all之类的内容并创建一个获取promise array.这是一个细节但很好:

async function fetchAllPokemonData() {
  const data = await Promise.all(pokemon.map(p=>fetch(p.url)))
  setData(data);
}

然后，设置数据时，还可以设置isLoading个状态

setData(data);
setIsLoading(false);