React项目调用API时如何正确渲染数组内嵌套的tags对象

错误原因 #

你当前的写法是直接将 tag 整个对象传入JSX进行渲染，React不支持直接将对象作为子元素渲染，因此抛出了对应的错误。

解决方法 #

你只需要取出 tag 对象中需要渲染的字段即可，根据你返回的接口结构，标签名称存放在 name 字段中。同时React列表渲染需要为每个子元素指定唯一的key属性，这里直接使用tag自带的id作为key即可。
额外提示：React中定义元素类名需要用className代替原生HTML的class属性，避免触发属性不兼容告警。

修改后的代码段（tags渲染部分） #

<div className="project__tags">
  {project.tags.map(tag => (
    <span key={tag.id} className="tag tag--pill tag--main">
      <small>{tag.name}</small>
    </span>
  ))}
</div>

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