React 计数器 + 随机用户 API

目标

用 React Hooks（useState、useEffect）实现计数器，并调用免费 API 获取随机用户信息。

完整代码

src/App.tsx

import { useState, useEffect } from 'react'

interface User {
  name: { first: string; last: string }
  email: string
  picture: { large: string }
}

export default function App() {
  const [count, setCount] = useState(0)
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(false)

  async function fetchUser() {
    setLoading(true)
    try {
      const res = await fetch('https://randomuser.me/api/')
      const data = await res.json()
      setUser(data.results[0])
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => { fetchUser() }, [])

  return (
    <div style={styles.container}>
      <h1>⚛️ React 入门示例</h1>

      {/* 计数器 */}
      <div style={styles.card}>
        <h2>计数器: {count}</h2>
        <div style={styles.buttons}>
          <button onClick={() => setCount(c => c - 1)} style={styles.btn}>-1</button>
          <button onClick={() => setCount(0)} style={styles.btn}>重置</button>
          <button onClick={() => setCount(c => c + 1)} style={styles.btn}>+1</button>
        </div>
      </div>

      {/* 随机用户 */}
      <div style={styles.card}>
        <h2>随机用户</h2>
        {loading && <p>加载中...</p>}
        {user && (
          <div style={{ textAlign: 'center' }}>
            <img src={user.picture.large} alt="avatar" style={styles.avatar} />
            <p><strong>{user.name.first} {user.name.last}</strong></p>
            <p style={{ color: '#666' }}>{user.email}</p>
          </div>
        )}
        <button onClick={fetchUser} style={styles.btn}>换一个</button>
      </div>
    </div>
  )
}

const styles: Record<string, React.CSSProperties> = {
  container: { maxWidth: 420, margin: '2rem auto', fontFamily: 'system-ui' },
  card: { border: '1px solid #e5e7eb', borderRadius: 12, padding: 20, marginBottom: 16 },
  buttons: { display: 'flex', gap: 8, marginTop: 8 },
  btn: { padding: '8px 16px', background: '#3b82f6', color: '#fff', border: 'none', borderRadius: 6, cursor: 'pointer' },
  avatar: { width: 80, height: 80, borderRadius: '50%', marginBottom: 8 },
}

运行

npm install &;& npm run dev

预期输出

页面显示：

• 计数器卡片，可加减和重置
• 随机用户卡片，显示头像/姓名/邮箱，可点击换一个