useState 沒有工作

Question

can anyone tell me why this country not set in setCountry state via axios.i am fetching data from api via axios.i have below attched my response data from api.

function Country() {
    const [Country, setCountry] = useState([])

    useEffect(()=>{
        //IF [] , runs only once
        const fetchUrl="https://api.first.org/data/v1/countries"
       async function fetchData(){
           
           const request=await axios.get(fetchUrl);
           setCountry(request.data);
           return request;
 
       }
       fetchData();
    
    },[]);

    return (
        <div>
            <button >load country</button>
            <select>
            

            </select>
            
        </div>
    )
}

export default Country

console.log 中來自 api 的響應數據

{status: "OK", status-code: 200, version: "1.0", total: 251, limit: 100, …}
access: "public"
data: {DZ: {…}, AO: {…}, BJ: {…}, BW: {…}, BF: {…}, …}
limit: 100
offset: 0
status: "OK"
status-code: 200
total: 251
version: "1.0"

Answer 1

您通過 API 響應訪問的數據是 object。 也許你可以做的是這樣的 -

setCountry(Object.values(request.data));

request.data將是具有以下結構的 object -

request.data = {
       "DZ":{"country":"Algeria","region":"Africa"},
       "AO":{"country":"Angola","region":"Africa"},
       "BJ":{country":"Benin","region":"Africa"}
       ....
}

現在將其傳遞給Object.values將返回一個數組，您可以將其直接設置到組件 state 中。

Object.values(request.data) = [
   {country: "Algeria", region: "Africa"},
   {country: "Angola", region: "Africa"},
   {country: "Benin", region: "Africa"},
   ....
]