React用map渲染API返回对象属性时遇语法错误及只读属性报错

错误原因分析 #

1. 数据类型误用：你获取的issue.user是单个对象，而map是数组专属方法，无法直接在对象上调用。
2. 语法错误：代码中({issue.user.map(...)})多了一层不必要的圆括号，JSX表达式无需额外包裹圆括号，这直接导致了解析报错。
3. 判断条件错误：对象不存在length属性，用issue.user.length > 0判断用户是否存在完全不成立，应直接判断issue.user是否为有效对象。

修正后的代码 #

当前user是单个对象，直接渲染即可：

<p>
  {issue.user && (
    <div key={issue.user.id}>
      <p>{issue.user.login}</p>
    </div>
  )}
</p>

兼容数组场景的代码（如果后续API可能返回多个用户） #

若之后接口可能返回user数组，可增加数组判断逻辑：

<p>
  {Array.isArray(issue.user) 
    ? issue.user.map((person) => (
        <div key={person.id}>
          <p>{person.login}</p>
        </div>
      ))
    : issue.user && (
        <div key={issue.user.id}>
          <p>{issue.user.login}</p>
        </div>
      )
  }
</p>

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