如何顯示來自 GitHub API 的文件名？

Question

我正在嘗試在 github 的 API 中顯示要點的文件名。 API 是： 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>
          ) 
...

如何顯示文件名？ 謝謝你的時間。

Answer 1

由於您不知道鍵名，請使用Object.values獲取第一個對象，然后該名稱可用於.filename ：

{gistList.map((item, id) => <em>{Object.values(item.files)[0].filename}</em>)}

---

演示：（替換為硬編碼的 json）

 // Get a hook function const {useState, useEffect} = React; const Gists = () => { const [gistList, setGistList] = useState([ {"url": "https://api.github.com/gists/bde143b5c1c684d8d6df701baa855e81", "forks_url": "https://api.github.com/gists/bde143b5c1c684d8d6df701baa855e81/forks", "commits_url": "https://api.github.com/gists/bde143b5c1c684d8d6df701baa855e81/commits", "id": "bde143b5c1c684d8d6df701baa855e81", "node_id": "G_kwDNBM7aACBiZGUxNDNiNWMxYzY4NGQ4ZDZkZjcwMWJhYTg1NWU4MQ", "git_pull_url": "https://gist.github.com/bde143b5c1c684d8d6df701baa855e81.git", "git_push_url": "https://gist.github.com/bde143b5c1c684d8d6df701baa855e81.git", "html_url": "https://gist.github.com/bde143b5c1c684d8d6df701baa855e81", "files": {"master.m3u8": {"filename": "master.m3u8", "type": "application/vnd.apple.mpegurl", "language": null, "raw_url": "https://gist.githubusercontent.com/yarox/bde143b5c1c684d8d6df701baa855e81/raw/5c3147367abb808482945e93299c6ed2a9bb1193/master.m3u8", "size": 1808 } }, "public": true, "created_at": "2022-07-06T13:57:35Z", "updated_at": "2022-07-06T14:14:10Z", "description": "", "comments": 0, "user": null, "comments_url": "https://api.github.com/gists/bde143b5c1c684d8d6df701baa855e81/comments", "owner": {"login": "yarox", "id": 1230, "node_id": "MDQ6VXNlcjEyMzA=", "avatar_url": "https://avatars.githubusercontent.com/u/1230?v=4", "gravatar_id": "", "url": "https://api.github.com/users/yarox", "html_url": "https://github.com/yarox", "followers_url": "https://api.github.com/users/yarox/followers", "following_url": "https://api.github.com/users/yarox/following{/other_user}", "gists_url": "https://api.github.com/users/yarox/gists{/gist_id}", "starred_url": "https://api.github.com/users/yarox/starred{/owner}{/repo}", "subscriptions_url": "https://api.github.com/users/yarox/subscriptions", "organizations_url": "https://api.github.com/users/yarox/orgs", "repos_url": "https://api.github.com/users/yarox/repos", "events_url": "https://api.github.com/users/yarox/events{/privacy}", "received_events_url": "https://api.github.com/users/yarox/received_events", "type": "User", "site_admin": false }, "truncated": false }, {"url": "https://api.github.com/gists/324c40175101a6148f49ffa9f441fd18", "forks_url": "https://api.github.com/gists/324c40175101a6148f49ffa9f441fd18/forks", "commits_url": "https://api.github.com/gists/324c40175101a6148f49ffa9f441fd18/commits", "id": "324c40175101a6148f49ffa9f441fd18", "node_id": "G_kwDOA7YuXdoAIDMyNGM0MDE3NTEwMWE2MTQ4ZjQ5ZmZhOWY0NDFmZDE4", "git_pull_url": "https://gist.github.com/324c40175101a6148f49ffa9f441fd18.git", "git_push_url": "https://gist.github.com/324c40175101a6148f49ffa9f441fd18.git", "html_url": "https://gist.github.com/324c40175101a6148f49ffa9f441fd18", "files": {"AnimationName-1657115848105-91.css": {"filename": "AnimationName-1657115848105-91.css", "type": "text/css", "language": "CSS", "raw_url": "https://gist.githubusercontent.com/GradientAnimator/324c40175101a6148f49ffa9f441fd18/raw/7e76023a415885b9f432a7c975f8d02d111eda6c/AnimationName-1657115848105-91.css", "size": 1202 } }, "public": true, "created_at": "2022-07-06T13:57:28Z", "updated_at": "2022-07-06T13:57:28Z", "description": "CSS Gradient Animation", "comments": 0, "user": null, "comments_url": "https://api.github.com/gists/324c40175101a6148f49ffa9f441fd18/comments", "owner": {"login": "GradientAnimator", "id": 62271069, "node_id": "MDQ6VXNlcjYyMjcxMDY5", "avatar_url": "https://avatars.githubusercontent.com/u/62271069?v=4", "gravatar_id": "", "url": "https://api.github.com/users/GradientAnimator", "html_url": "https://github.com/GradientAnimator", "followers_url": "https://api.github.com/users/GradientAnimator/followers", "following_url": "https://api.github.com/users/GradientAnimator/following{/other_user}", "gists_url": "https://api.github.com/users/GradientAnimator/gists{/gist_id}", "starred_url": "https://api.github.com/users/GradientAnimator/starred{/owner}{/repo}", "subscriptions_url": "https://api.github.com/users/GradientAnimator/subscriptions", "organizations_url": "https://api.github.com/users/GradientAnimator/orgs", "repos_url": "https://api.github.com/users/GradientAnimator/repos", "events_url": "https://api.github.com/users/GradientAnimator/events{/privacy}", "received_events_url": "https://api.github.com/users/GradientAnimator/received_events", "type": "User", "site_admin": false }, "truncated": false } ]) return ( <div> {gistList.map((item, id) => <em>{Object.values(item.files)[0].filename}</em>)} </div> ) }; ReactDOM.render(<Gists />, document.getElementById("react"));

 div { display: flex; flex-direction: column; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>