如何从GitHub API返回的Gist数据中正确获取并展示文件名？

我尝试在调用GitHub API时展示Gist对应的文件名，使用的接口地址为：https://api.github.com/gists/public
该接口的返回响应结构示例如下：

当前编写的实现代码如下：

const Gists = () => {
  const [gistList, setGistList] = useState([])

  const { isLoading, data, error } = useFetch(
    "https://api.github.com/gists/public?page=2&per_page=100"
  )

  useEffect(() => {
    if (!isLoading) {
      setGistList(data)
    }
  }, [data, isLoading])

  if (isLoading) return <div>Loading...</div>
  if (error)
    return (
      <div>
        <p>Code: {error.status}</p>
      </div>
    )

  return (
    <div>
      {gistList
        .map((item, id) => {
          return (
            <div key={id}>
              <div>

                <h2>{item.files.???}</h2>

                <img src={item.owner.avatar_url} alt='profile'/>
              </div>
            </div>
          ) 
...

需要补全文件名的取值逻辑，正确展示Gist对应的文件名。

GitHub公开Gist接口返回的单条Gist数据中，files字段是键值对结构：键名本身就是文件名，键值是对应文件的详情属性（包含语言、大小、原始内容地址等信息）。由于一个Gist支持上传多个文件，你可以根据自身展示需求选择取值逻辑：

• 仅展示Gist的第一个文件名：通过Object.keys(item.files)[0]即可获取第一个文件的名称，注意要加判空逻辑，避免接口返回异常时前端报错
• 展示Gist下所有文件名：遍历Object.keys(item.files)返回的文件名数组，逐个渲染即可

对应代码修改 #

单文件名展示 #

将代码中待补全的<h2>部分替换为以下代码：

<h2>{item.files ? Object.keys(item.files)[0] : ''}</h2>

多文件名展示 #

如果需要列出当前Gist包含的全部文件，可修改为：

<div>
  {item.files && Object.keys(item.files).map(fileName => (
    <h2 key={fileName}>{fileName}</h2>
  ))}
  <img src={item.owner.avatar_url} alt='profile'/>
</div>

额外优化建议 #

你当前列表渲染使用遍历下标作为key值存在隐患，建议替换为Gist本身的全局唯一IDitem.id，避免列表分页、排序更新时出现渲染错误，修改后遍历写法如下：

{gistList.map((item) => {
  return (
    <div key={item.id}>
      <div>
        <h2>{item.files ? Object.keys(item.files)[0] : ''}</h2>
        <img src={item.owner.avatar_url} alt='profile'/>
      </div>
    </div>
  ) 
})}

如果需要获取文件的其他属性，直接通过item.files[文件名]访问即可，比如获取第一个文件的编程语言：item.files[Object.keys(item.files)[0]].language。

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