使用 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 function 中返回 JSX。

要解决此问题，有两种解决方案。

---

1.在回调中使用括号（ () ）

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

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

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

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

此代码中的唯一区别是您将立即返回它，用方括号表示。

如果你想让它成为单行代码，你可以使用这个代码。

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

这将做同样的事情； 返回箭头 function 中的 JSX。

---

2.使用return关键字

第二种选择是使用return关键字。

您可以使用它来返回 JSX，以便map function 可以使用它。

它的用法非常简单。

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

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

---

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

有两种解决方案。

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