无法从useEffect更新React状态挂钩

时间:2019-05-05 19:50:25

标签: javascript reactjs axios react-hooks

我想用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

1 个答案:

答案 0 :(得分:1)

两件事情:useState返回具有两个元素的数组,并且该数组没有要对其进行重构的countriessetCountries键。您可以这样做:

  const { 0: countries, 1: setCountries } = useState([]);

或者只是

  const [countries, setCountries] = useState([]);

第二,useEffect(..)如果没有第二个参数,则会在每次重新渲染时触发效果,因此xour组件将陷入更新循环中。使用空数组作为第二个参数,仅在加载时触发效果。