我想用useEffect更新状态钩子。不知何故,它给我一个错误,并破坏了我的应用程序。
Console.log在控制台中给出正确的答案,但是以某种方式做出反应并不想将setCountries识别为状态挂钩函数。我在这里做错了什么?
import React, { useState, useEffect } from 'react'
import axios from 'axios'
var host = 'https://restcountries.eu/rest/v2/all'
const App = () => {
const { countries, setCountries } = useState([])
useEffect(() => {
axios
.get(host)
.then(response => {
console.log(response.data)
setCountries(response.data)
})
})
return (
<div>
</div>
)
}
export default App
我在浏览器中遇到的错误
Unhandled Rejection (TypeError): setCountries is not a function
控制台错误:
Uncaught (in promise) TypeError: setCountries is not a function
at App.js:14
最佳答案
两件事:useState
返回具有两个元素的数组,并且数组没有要对其进行分解的countries
或setCountries
键。您可以这样做:
const { 0: countries, 1: setCountries } = useState([]);
要不就
const [countries, setCountries] = useState([]);
其次,没有任何第二个参数的
useEffect(..)
将导致效果在每次重新渲染时都被触发,因此xour组件将陷入更新循环中。使用空数组作为第二个参数仅触发加载效果。关于javascript - 无法从useEffect更新React状态 Hook ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55995806/