从 API 随机生成国家/地区名称

Question

我正在使用 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>
    )
}

任何帮助将不胜感激！谢谢！

Answer 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>
    )
}

Answer 2

因为所有数据都以数组内对象的形式出现。您可以做的不是尝试生成随机国家/地区名称，而是生成随机数并传递它。因此，单击按钮时您将获得随机国家/地区。 这里稍微修复一下。

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>

Answer 3

这里是一个使用 api 随机生成国家国旗的示例网站随机国家生成