Произвольно сгенерировать название страны из API

avatar
Valery Fun
1 июля 2021 в 17:00
501
2
1

Я использую https://restcountries.eu/rest/v2/all для получения всех названий стран.

Я пытаюсь сгенерировать случайное название страны по клику. Я просмотрел массив объектов, чтобы получить названия стран, но onClick не работает.

const WorldCard = () => {
    const [country, setCountry] = useState([])
    const [name, setCount] = useState(0)

    useEffect(() => {
        fetch('https://restcountries.eu/rest/v2/all')
            .then(res => res.json())
            .then(result => {
                setCountry(result)
                console.log(result)
            })
    }, [])

    const countryName = country => {
        return country.map(d => d.name)
    }

    return (
        <Card>
            <Card.Body>{name}</Card.Body>
            <Button
                onClick={() =>
                    setCount(countryName[Math.floor(Math.random() * countryName.length)])
                }
            >
                Click me
            </Button>
        </Card>
    )
}

Любая помощь будет оценена по достоинству! Спасибо!

Источник

Ответы (2)

avatar
Neel Dsouza
1 июля 2021 в 17:26
1

countryName — это функция, но вы использовали ее как массив. Таким образом, вам нужно сопоставить свой ответ во время настройки данных, и вы можете напрямую использовать их. Попробуйте ниже код 

const WorldCard = () => {
    const [country, setCountry] = useState([])
    const [name, setCount] = useState(0)

    useEffect(() => {
        fetch('https://restcountries.eu/rest/v2/all')
            .then(res => res.json())
            .then(result => {
                setCountry(countryName(result))
                console.log(result)
            })
    }, [])

    const countryName = country => {
        return country.map(d => d.name)
    }

    return (
        <Card>
            <Card.Body>{name}</Card.Body>
            <Button
                onClick={() =>
                    setCount(country[Math.floor(Math.random() * country.length)])
                }
            >
                Click me
            </Button>
        </Card>
    )
}
Valery Fun
1 июля 2021 в 17:53
0

благодарю вас!! что, если я хочу получить доступ к другим объектам в массиве? Могу ли я сопоставить более 1 объекта в функции countryName? @Нил

Neel Dsouza
1 июля 2021 в 17:55
1

Не требуется. Вы можете добавить ту же функцию карты, что и эта return country.map(d => {d.name, d.anotherObject})

Valery Fun
1 июля 2021 в 18:30
1

спасибо! я сделал это: country.map(d => ({name: d.name, population: d.population})) @Neel

avatar
Muhammad Sameem
1 июля 2021 в 17:37
1

Поскольку все данные поступают в виде объектов внутри массива. Что вы можете сделать, так это вместо того, чтобы пытаться сгенерировать случайное название страны, сгенерировать случайное число и передать его. Таким образом, вы получите случайные страны при нажатии кнопки. Небольшое исправление.

const [countries, setCountries] = useState([]);
const [randomCountry, setRandomCountry] = useState(0)

<Button onClick={() => setRandomCountry(Math.floor(Math.random() * countries.length))}> // this will just set the number for random country. pass randomCountry to useEffect as dependency array or you can use it some way in countries.map()
     Click me
</Button>