一個 React 簡單應用的例子：通過 API 獲取 GitHub 用戶信息 | Tech Wiki Online

一個 React 簡單應用的例子：通過 API 獲取 GitHub 用戶信息

這是一個非常簡單的例子，展示了一個表單接受GitHub用戶名稱，一旦接收到submit事件，它將向 GitHub API 請求該用戶的信息並打印。

這段代碼創建了一個可重用的Card組件。當你在由Form組件管理的input字段中輸入一個名稱時，這個名稱被綁定到它的狀態中。

當按下Add card時，清除Form組件的userName狀態，以清除輸入表單。

除了 React，該示例還使用了Axios庫。這是一個很好的輕量級庫，用於處理網絡請求。可在 CodePen 中的設置中添加它，或者使用npm install axios在本地安裝它。

輸出:

代碼:

首先創建 Card 組件，這個組件將顯示我們從 GitHub 獲取的圖像和詳細信息。它通過 props 獲取數據，使用：

• props.avatar_url 用戶頭像
• props.name 用戶名稱
• props.blog 用戶個人網站的URL

const Card = props => {
  return (
    <div style={{ margin: '1em' }}>
      <img alt="avatar" style={{ width: '70px' }} src={props.avatar_url} />
      <div>
        <div style={{ fontWeight: 'bold' }}>{props.name}</div>
        <div>{props.blog}</div>
      </div>
    </div>
  )
}

我們創建了一個 Card 組件的列表，它將作為父組件中的 cards 屬性傳遞給 CardList ，使用 map() 函數遍歷它並輸出一個卡片列表：

const CardList = props => (
  <div>
    {props.cards.map(card => (
      <Card {...card} />
    ))}
  </div>
)

父組件是 App ，它在自己的狀態中存儲了 cards 陣列，使用 useState() Hook 進行管理：

const App = () => {
  const [cards, setCards] = useState([])

  return (
    <div>
      <CardList cards={cards} />
    </div>
  )
}

太好了！現在我們肯定有一種方法可以請求 GitHub 獲取一個用戶名稱的詳細信息。我們將使用一個 Form 組件，其中我們管理自己的狀態（username），然後使用他們的公共 API 通過 Axios 向 GitHub 請求有關用戶的信息：

const Form = props => {
  const [username, setUsername] = useState('')

  handleSubmit = event => {
    event.preventDefault()

    axios.get(`https://api.github.com/users/${username}`).then(resp => {
      props.onSubmit(resp.data)
      setUsername('')
    })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={event => setUsername(event.target.value)}
        placeholder="GitHub 用戶名稱"
        required
      />
      <button type="submit">添加卡片</button>
    </form>
  )
}

當表單提交時，調用 handleSubmit 事件，在網絡請求完成後，我們調用 props.onSubmit ，將我們從 GitHub 獲取的數據傳遞給父組件（App）。

我們將其添加到 App 中，將一個用於向卡片列表添加新卡片的方法 addNewCard 作為 onSubmit 屬性傳遞給它：

const App = () => {
  const [cards, setCards] = useState([])

  addNewCard = cardInfo => {
    setCards(cards.concat(cardInfo))
  }

  return (
    <div>
      <Form onSubmit={addNewCard} />
      <CardList cards={cards} />
    </div>
  )
}

最後，我們渲染應用程序：

ReactDOM.render(<App />, document.getElementById('app'))

這是我們這個小小的 React 應用程序的完整源代碼：

const { useState } = React

const Card = props => {
  return (
    <div style={{ margin: '1em' }}>
      <img alt="avatar" style={{ width: '70px' }} src={props.avatar_url} />
      <div>
        <div style={{ fontWeight: 'bold' }}>{props.name}</div>
        <div>{props.blog}</div>
      </div>
    </div>
  )
}

const CardList = props => <div>{props.cards.map(card => <Card {...card} />)}</div>

const Form = props => {
  const [username, setUsername] = useState('')

  handleSubmit = event => {
    event.preventDefault()

    axios
      .get(`https://api.github.com/users/${username}`)
      .then(resp => {
        props.onSubmit(resp.data)
        setUsername('')
      })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={event => setUsername(event.target.value)}
        placeholder="GitHub 用戶名稱"
        required
      />
      <button type="submit">添加卡片</button>
    </form>
  )
}

const App = () => {
  const [cards, setCards] = useState([])

  addNewCard = cardInfo => {
    setCards(cards.concat(cardInfo))
  }

  return (
    <div>
      <Form onSubmit={addNewCard} />
      <CardList cards={cards} />
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('app'))

在 CodePen 上查看： https://codepen.io/flaviocopes/pen/oJLyeY

tags: [“React”, “Axios”, “GitHub API”, “Form”, “Card”]