如何在 React 中動態調用 API？

Question

這是我第一次嘗試為國家及其相應的州和城市創建動態的 API 調用。

  const [countries, setCountries] = useState([]);
  const [states, setStates] = useState([]);
  const [cities, setCities] = useState([]);


const fetchData = useCallback(async () => {
    let countryURL = "https://countryAPI"; 
    let statesURL = "https://statesAPI"; 
    let citiesURL = "https://citiesAPI"; 

    const requestOne = await Axios.get(countryURL);
    const requestTwo = await Axios.get(statesURL);
    const requestThree = await Axios.get(citiesURL);

    Axios.all([requestOne, requestTwo, requestThree]).then(
      Axios.spread((...responses) => {
        const responseOne = responses[0];
        const responseTwo = responses[1];
        const responseThree = responses[2];

        setCountries(responseOne.data.data);
        setStates(responseTwo.data.data);
        setCities(responseThree.data.data);
      })
    );
  }, [data.country, data.states]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

上面的代碼是我打算通過動態選擇一個國家來實現的想法，該國家獲取其州並選擇一個州，獲取相應的城市。 我是關於如何實現 onChange 方法來動態處理此問題的指南。

              <select 
               value={data.countries}
              //onChange={HandleChange1}
               
               >
                <option value="">Select Country</option>
                {countries.map((item, i) => (
                  <option key={i} value={item}>
                    {item}
                  </option>
                ))}
              </select>
          
            <div>
              <select 
                value={data.states}
                 //onChange = {handleChange2}
                 >
                <option value="">Select State</option>
                {states.map((item, i) => (
                  <option key={i} value={item}>
                    {item}
                  </option>
                ))}
              </select>
           </div>
          
              <div>
              <select 
              value={items.facility_name} 
               >
                <option value="">Select City</option>
                {cities.map((item, i) => (
                  <option key={i} value={item}>
                    {item}
                  </option>
                ))}
              </select>
           </div>

如何實現 handleChange 函數，以便在選擇一個國家/地區時，州的下拉列表會更改以列出該特定選定國家/地區的州...與選擇州時的城市相同。 請幫忙

Answer 1

你需要使用useEffect下面是一個示例代碼。

 import React, { useState, useEffect, useCallback } from "react"; const FetchList = () => { //Form Values const [country, setCountry] = useState(""); const [state, setState] = useState(""); //Data list const [countries, setCountries] = useState([]); const [states, setStates] = useState([]); const [cities, setCities] = useState([]); const fetchCountries = useCallback(() => { //fetch return ["USA", "UK"]; }, []); const fetchStates = useCallback(() => { //fetch if (country === "USA") { return ["California", "NewYork"]; } else if (country === "UK") { return ["UK1", "UK2"]; } else { return []; } }, [country]); useEffect(() => { const countries = fetchCountries(); console.log(countries); setCountries(countries); }, []); useEffect(() => { const states = fetchStates(); console.log(states); setStates(states); }, [country]); return ( <div> <select value={country} onChange={(e) => { setCountry(e.target.value); }} > <option value="">Select Country</option> {countries.map((item, i) => ( <option key={i} value={item}> {item} </option> ))} </select> <div> <select value={state} onChange={(e) => { setState(e.target.value); }} //onChange = {handleChange2} > <option value="">Select State</option> {states.map((item, i) => ( <option key={i} value={item}> {item} </option> ))} </select> </div> <div></div> </div> ); }; export default FetchList;