React JS 渲染错误的列表和键答案

【问题标题】：React JS rendering wrong Lists and KeysReact JS 渲染错误的列表和键
【发布时间】：2020-03-24 20:55:27
【问题描述】：

您好，我被困住了，我有这段代码，但它只呈现如下图所示的数字。我究竟做错了什么。

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

这是列出国家名称所需的输出。

【问题讨论】：

可能会从 [country, code] 更改为 [code, country] 解决您的问题。因为 Object.entries 数组中的第一个值是键，而第二个是值
试试 console.log(Object.entries(countries.countries))

标签： javascript arrays reactjs next.js

【解决方案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>
    {countries.countries.map(({name, iso2: code}) => (
        <option key={code} value={code}>
            {name}
        </option>
    ))}
</select>

我希望这会有所帮助！

【讨论】：

【解决方案2】：

您可以通过更新 jsx 来解决此问题：

{Object.entries(countries.countries).map(([idx, {name, iso2}]) => (
    <option key={iso2} value={iso2}>
        {name}
    </option>
))}

说明：

countries.countries 返回一个对象数组。
Object.entries 在数组上返回 [index, value] 对的数组，其中 index 是数组的索引，value 是 countries 数组中的每个对象。
[idx, {name, iso2}] 使用它，我们将解构数组中的对象并从中仅获取 name 和 iso2 属性。
然后我们将在 UI 中显示这些值。

【讨论】：

【解决方案3】：

工作代码：

const App = () => {
const [state, setState] = React.useState(null);

React.useEffect(() => {
    const getData = async () => {
        try {
            const result = await axios(
                "https://covid19.mathdro.id/api/countries"
            );
            setState(result.data.countries);
        } catch (error) {
            console.error(error);
        }
    };
    getData();
}, []);

console.log(state);

return (
    <div>    
            <select>
                {state &&
                    state.map(({ name, iso2, iso3 }) => (
                        <option key={name} value={name}>
                            {`${name} ${iso2} ${iso3}`}
                        </option>
                    ))}
            </select>            
    </div>
  );
};
export default App;

【讨论】：