时间戳

首页 > 解决方案 > React Set 状态在第一次单击时不起作用（api 减速）

javascript - React Set 状态在第一次单击时不起作用（api 减速）

问题描述

我正在尝试使用 Poke API 创建一个 Web 应用程序来显示多个 Pokemon。我正在尝试使用按钮来“更改页面”并将 API URL 更改为下一组或上一组 Pokemon，但由于某种原因，这些按钮不会在第一次单击时更改页面，但会在后续操作点击。在 console.log 中，状态和 API URL 在第一次单击时不会改变。此外，我在向前移动后第一次点击上一页不会向后移动页面，而是向前移动它。我该如何解决？

编辑：在查看了其他一些帖子之后，看起来原因与 React 异步执行这一切有关，我认为 API 在渲染所有口袋妖怪之前更新和更新所有其他数据需要很长时间。所以现在我想知道我应该如何强制它等待 API 和数据完全更新？

function App() {
  const [currentApiURL, setCurrentApiURL] = useState("https://pokeapi.co/api/v2/pokemon/?limit=27&offset=0"); //https://pokeapi.co/api/v2/pokemon/?limit=27&offset=0
  const [nextApiURL, setNextApiURL] = useState("https://pokeapi.co/api/v2/pokemon/?limit=27&offset=27");
  const [prevApiURL, setPrevApiURL] = useState();
  const [multPokemonUrls, setMultPokemonUrls] = useState([]);

  useEffect(() => {
    fetch(currentApiURL)
      .then(response => response.json())
      .then(data => {
        setMultPokemonUrls(data.results.map(data => data.url));
        setNextApiURL(data.next);
        setPrevApiURL(data.previous);
      })
  }, [currentApiURL])

  function nextPage() {
    setCurrentApiURL(nextApiURL);
    console.log(currentApiURL);
  }

  function prevPage() {
    setCurrentApiURL(prevApiURL);
    console.log(currentApiURL);
  }

  return (
    <div className="App">
        <button onClick={() => {prevPage()}> Prev</button>
        <button onClick={() => {nextPage()}> Next</button>
      </header>
      
      <div className="App-pokemoncontainer">
        {multPokemonUrls.map((poke) =>
          <Pokemon url={poke} />
        )}
      </div>
    </div>
  );
}

标签： javascriptreactjs

解决方案

获取所有 pokemonUrls 后，您使用Promise.all

此外，您</header>没有开始标签，并且onClick处理程序现在是正确的

onClick={() => {prevPage()}应该onClick={() => prevPage()}

onClick={() => {nextPage()}应该onClick={() => nextPage()}

因此，删除multPokemonUrls 状态并将其替换为新状态（例如multPokemons：），您可以在其中获取所有 url 并获取最终数据（All pokemons data）。

我使用了您的代码并在此处进行了上述更改。

推荐阅读