使用状态不起作用答案

【问题标题】：useState is not woking使用状态不起作用
【发布时间】：2021-06-09 17:45:57
【问题描述】：

谁能告诉我为什么这个国家没有通过 axios 设置为 setCountry 状态。我正在通过 axios 从 api 获取数据。我在下面附加了来自 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"

【问题讨论】：

看起来您希望 country 是一个数组，但从 API 返回的 data 是一个对象。
那我怎样才能得到它
我认为这里没有问题。您正在验证什么或如何验证状态没有更新或工作？
很难说你在找什么，但也许setCountry(Object.values(request.data));?
您不应该使用大写国家作为状态变量。组件名称大写是惯例。现在您有两个名为 Country 的变量。组件和状态变量。你怎么知道国家没有设置？也许您记录了错误的国家？我建议将 state country 变量从 Country 更改为 country

标签： javascript reactjs

【解决方案1】：

您通过 API 响应访问的数据是一个对象。也许你能做的就是这样 -

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

request.data 将是一个具有以下结构的对象 -

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

现在将其传递给Object.values 将返回一个数组，您可以直接将其设置为组件状态。

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

【讨论】：

我认为我们还没有足够的上下文来明确地说状态正在更新为对象 vs 数组，这是“状态更新不起作用”的问题。显然初始状态和响应形状不匹配，但即使存在这种差异，状态更新仍会发生。