為什么我的 state 僅在第二次 state 更改時更新，而不是第一次 state 在 React 中隨 useEffect 更改而更新？

Question

我制作了一個搜索欄，允許用戶搜索一個特定城市（如果未定義運動）或特定城市中的特定運動（如果定義了運動）中的所有可用運動。 城市總會被定義。

我在我的搜索欄上放了 2 個輸入（城市和運動），我想要立即得到結果（這樣就有一個對我的 API 的請求，而沒有任何觸發請求的按鈕“搜索”）。

因此，當用戶在城市輸入上鍵入內容時，它會觸發對 API 的請求，當他在運動輸入上鍵入內容時，它會重新觸發請求，但這次是定義了城市和運動。 兩個輸入值都存儲在狀態（城市和運動）中。

我設法做了一些似乎可行的事情，唯一的問題是，如果我在輸入搜索中鍵入一項運動，它不會更新我對 API 的請求。 我必須再次在我的輸入中重新輸入這項運動，以便更新請求。 我不知道為什么我第一次在我的運動輸入中輸入內容時它沒有更新，因為我在我的 useEffect 數組上指定了它必須在運動 state 更改時重新渲染。

有人可以幫我理解這一點嗎？

我的代碼：

import React, { useState, useEffect } from "react";
import style from "../styles/pdrs.module.css";
import axios from "axios";


import SearchBar from "../components/SearchBar";

const Pdrs = ({ setSearchCity, searchSport, setSearchSport }) => {
  // if request's result is loading
  const [isLoading, setIsLoading] = useState(false);
  // search result
  const [searchresults, setSearchresults] = useState(
    "Lancez une recherche avec au moins une ville !"
  );
  // state for the searchbar request
  const [city, setCity] = useState("");
  const [sport, setSport] = useState(0);

  // get city's id for API's request
  const fetchCity = async () => {
    setIsLoading(true);
    try {
      // city search
      const cityResponse = await axios.get(
        `${baseAPI}/city/name=${searchCity}`
      );
      const city = cityResponse.data;
      setCity(city);
      setIsLoading(false);
    } catch (error) {
      console.log(error.message);
      setIsLoading(false);
    }
  };

  //fetching sport id
  const fetchSport = async () => {
    setIsLoading(true);
    try {
      const sportResponse = await axios.get(
        `${baseAPI}/activity/name=${searchSport}`
      );
      setSport(sportResponse.data.data[0].macro_activity_id);
      setIsLoading(false);
    } catch (error) {
      console.log(error.message);
    }
  };

  //fetching final request response
  const fetchDataRequest = async () => {
    try {
      setIsLoading(true);
      const results = await axios.get(
        `${baseAPI}/pdrs?city_id=${city.id}${
          sport ? "&macro_activity_id=" + sport : ""
        }`
      );
      // manage search results
      if (results.data.nb_results === 1) {
        setSearchresults({
          data: [results.data.data],
          nb_results: 1,
        });
        setNbResults(1);
        setIsLoading(false);
      } else {
        setSearchresults(results.data);
        setNbResults(results.data.nb_results);
        setIsLoading(false);
      }
    } catch (error) {
      console.log(error.message);
      setSearchresults(
        "Sorry, nothing was found... !"
      );
    }
  };

  useEffect(() => {
    if (searchCity) {
      fetchCity();
    }
    if (searchSport) {
      fetchSport();
    }
  }, [searchCity, searchSport]);

  useEffect(() => {
    if (searchCity) {
      fetchDataRequest();
    }
  }, [searchCity, searchSport]);
  console.log(searchresults);
  return <>
    <main className={`container ${style.pdrs}`}>
      <section className={style.searchbar}>
        <SearchBar
          searchCity={searchCity}
          setSearchCity={setSearchCity}
          searchSport={searchSport}
          setSearchSport={setSearchSport}
          searchInstallation={searchInstallation}
          setSearchInstallation={setSearchInstallation}
          searchType={searchType}
          setSearchType={setSearchType}
          setPage={setPage}
        />
      </section>
      <section className={style.results}>
        {isLoading ? (
          <div>Loading...</div>
        ) : typeof searchresults === "string" ? (
          <div className={`${style.container} ${style.noResults}`}>
            <h2>{searchresults}</h2>
          </div>
        ) : (
          <>
            <div className={style.container}>
              <div className={style.resultsList}>
                {searchresults.data.map((pdrs) => {
                  return (
                 // some code displaying the result
                  );
                })}
              </div>
            </div>
          </>
        )}
      </section>
    </main>
</>;
};

export default Pdrs;

Answer 1

由於您有兩個useEffect並且一個正在設置city和sport ，因此您需要進行 debounce 以自行調用獲取列表。

我建議您首先對 API 調用fetchDataRequest的使用效果進行更改：

useEffect(() => {
  if (searchCity) {
    fetchDataRequest();
  }
}, [city, sport]);

您將聆聽來自 BE 的實際數據，而不是來自您填寫的輸入。

其次，您可以從這里https://www.npmjs.com/package/use-debounce使用庫useDebounce並使用useDebounceCallback來延遲調用 API 在您 Z99938282F040718542ZEFEcity.