无法从 useEffect 更新 React 状态钩子

Question

我想用usefect更新我的状态钩。不知何故，这给了我一个错误并brok brok brok in thep。

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

Answer 1

两件事： useState返回一个带有两个元素的数组，并且数组没有countries或setCountries键来破坏。您可以这样做：

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

或只是

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

其次，没有任何第二个参数的useEffect(..)会导致每个rerender 触发效果，因此您的组件将陷入更新循环中。使用一个空数组作为其第二个参数，仅触发对负载的影响。