Не удается обновить обработчик состояния React из useEffect - PullRequest
Новая
       32

Не удается обновить обработчик состояния React из useEffect

0 голосов
/ 05 мая 2019

Я хочу обновить свой хук состояния с помощью 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 Ответ

2 голосов
/ 05 мая 2019

Две вещи: useState возвращает массив с двумя элементами, и массив не имеет ключа countries или setCountries для деструктурирования. Вы могли бы сделать это: 

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

или просто 

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

Во-вторых, useEffect(..) без второго аргумента вызовет срабатывание эффекта при каждом повторном отображении , поэтому компонент xour застрянет в цикле обновления. Используйте пустой массив в качестве второго аргумента, чтобы вызвать эффект только при загрузке.

...