如何将Axios获取的数组数据转为字符串，解决React中map调用报错问题

你遇到的报错本质是首次渲染时genres为undefined，无法调用数组的map方法，具体触发原因：

• 你给anime设置的初始值是空数组[]，但接口返回的res.data是对象类型，空数组不存在genres属性
• React组件会先使用初始值完成首次渲染，之后才会执行useEffect里的接口请求，所以首次渲染传递给子组件的genres是undefined，直接调用map就会触发类型错误

1. 修正父组件初始状态 #

将anime的初始值改为匹配返回结构的对象，默认给genres设置空数组兜底：

// 把原来的useState([])替换为
const [anime, setAnime] = useState({ genres: [] })

2. 子组件简化渲染逻辑 #

你需要输出逗号分隔的字符串，不需要手动循环生成span再处理分隔符，直接用数组方法组合即可，同时加可选链做异常兼容：

// 直接渲染这段代码即可得到目标格式
{genres?.map(genre => genre.name).join(', ')}

如果需要保留span标签包裹每个分类，可以写成：

{genres?.map((genre, index) => (
  <span key={genre.name}>
    {index > 0 && ', '}
    {genre.name}
  </span>
))}

如果项目不支持可选链语法，也可以用空数组兜底的写法：

{(genres || []).map(genre => genre.name).join(', ')}

内容的提问来源于stack exchange，提问作者Syek