在使用javascript向无序列表添加项目时遇到困难

Question

所以我试图从Api (https://restcountries.com/v3.1/all)检索有关国家的数据语言显示如下:

languages: {
afr: "Afrikaans",
eng: "English",
nbl: "Southern Ndebele",
nso: "Northern Sotho",
sot: "Southern Sotho",
ssw: "Swazi",
tsn: "Tswana",
tso: "Tsonga",
ven: "Venda",
xho: "Xhosa",
zul: "Zulu"
}

我的代码是:

const langs = Object.values(country["languages"]) //create array of languages
console.log(langs) 
return ( 
<ul>
{langs.map(each => {
//if i add console.log(each) here, it returns all of the languages in console
<li>
{each} doesn't display at all
</li>
})}
</ul>
)

如果你能告诉我我做错了什么，我将非常感激。提前感谢<3

Answer 1

代码的问题似乎是您没有在map函数中返回JSX。

要解决这个问题，有两个解决方案。

---

1。在回调中使用括号(())

第一个解决方案是在回调中使用括号。

括号将使它返回传递给回调函数的值。

要使用它，可以使用下面的代码:

langs.map((each) => (
<li>{each}</li>
));

这段代码中唯一的区别是您直接返回它，用括号表示。

如果您想让它变成一行代码，您可以使用以下代码:

langs.map((each) => <li>{each}</li>);

这将做同样的事情;返回箭头函数中的JSX。

---

2。使用return关键字

第二个选项是使用return关键字。

您可以使用它返回JSX，以便map函数可以使用它。

用法很简单。

langs.map((each) => {
return <li>{each}</li>;
});

这只是将JSX返回给map函数供其使用。

---

总之，问题是您没有在map函数中返回JSX。

有两种解决方法。

1. 在回调
中使用括号使用return关键字