React JS渲染错误的列表和键

Question

[嗨，我被卡住了，但我有这段代码，但它仅呈现如下图所示的数字。我究竟做错了什么。

       import useStats from '../utils/useStats';

export default function CountrySelector() {
    const countries = useStats('https://covid19.mathdro.id/api/countries');
    console.log(countries);
    if (!countries) return <p>Loading...</p>
    return (
        <div>
            <select>
                {Object.entries(countries.countries).map(([country, code]) => (
                    <option key={code} value={code}>
                        {country}
                    </option>
                ))}
            </select>
        </div>
    );
}

这是输出，需要列出国家/地区名称。

Answer 1

解构语句创建错误，请参见以下内容：

const data = [{"name":"Afghanistan","iso2":"AF","iso3":"AFG"},{"name":"Albania","iso2":"AL","iso3":"ALB"},{"name":"Algeria","iso2":"DZ","iso3":"DZA"},{"name":"Andorra","iso2":"AD","iso3":"AND"},{"name":"Angola","iso2":"AO","iso3":"AGO"},{"name":"Antigua and Barbuda","iso2":"AG","iso3":"ATG"},{"name":"Argentina","iso2":"AR","iso3":"ARG"}]

const result = data.map(({name, iso2: code}) => ({name, code}));

console.log(result);

因此，我将在您的代码中添加以下内容：

<select>
    {Object.entries(countries.countries).map(({name, iso2: code}) => (
        <option key={code} value={code}>
            {name}
        </option>
    ))}
</select>

我希望这会有所帮助！