使用Axios获取数据后无法在React中渲染HTML列表的问题

你的代码里departements.map的回调函数没有返回<li>元素——箭头函数使用大括号{}时必须显式写return，否则默认返回undefined，所以页面上看不到渲染的列表项。

有两种方式可以解决：

方式1：添加显式return #

修改map部分的代码：

{departements.map((dep) => {
  return <li key={dep.id}>{dep.name}</li>;
})}

方式2：改用箭头函数隐式返回 #

如果不需要在回调里写额外逻辑，可以直接用小括号包裹JSX，箭头函数会自动返回里面的内容：

{departements.map((dep) => (
  <li key={dep.id}>{dep.name}</li>
))}

你在fetchData里同时用了await和.then，可以简化成更简洁的写法：

const fetchData = async () => {
  const response = await api.get(DEPARTEMENTS);
  setDepartements(response.data.data.departements);
};

内容的提问来源于stack exchange，提问作者anis-newbi