当海风翻页时

1
import { useRequest } from 'ahooks'
2

3
function User() {
4
  const { data, loading, error } = useRequest(() =>
5
    fetch('/api/user').then(res => res.json())
6
  )
7

8
  if (loading) return <div>加载中……</div>
9
  if (error) return <div>错误：{error.message}</div>
10
  return <div>用户名：{data?.name}</div>
11
}

1
import { useLocalStorage } from 'react-use'
2

3
function App() {
4
  const [theme, setTheme] = useLocalStorage('theme', 'light')
5

6
  return (
7
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
8
      切换主题：{theme}
9
    </button>
10
  )
11
}

1
import { useAsync } from '@react-hookz/web'
2

3
function Data() {
4
  const { result, error, status } = useAsync(async () => {
5
    const res = await fetch('/api/data')
6
    return res.json()
7
  }, [])
8

9
  if (status === 'loading') return <div>加载中……</div>
10
  if (status === 'error') return <div>错误：{error.message}</div>
11
  return <div>{JSON.stringify(result)}</div>
12
}

1
import { useForm } from 'react-hook-form'
2

3
function Login() {
4
  const { register, handleSubmit, formState: { errors } } = useForm()
5
  const onSubmit = data => console.log(data)
6

7
  return (
8
    <form onSubmit={handleSubmit(onSubmit)}>
9
      <input {...register('email', { required: '邮箱必填' })} placeholder="邮箱" />
10
      {errors.email && <p>{errors.email.message}</p>}
11
      <button type="submit">登录</button>
12
    </form>
13
  )
14
}

1
import { useQuery } from '@tanstack/react-query'
2

3
function Posts() {
4
  const { data, isPending, error } = useQuery({
5
    queryKey: ['posts'],
6
    queryFn: () =>
7
      fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json()),
8
  })
9

10
  if (isPending) return <div>加载中……</div>
11
  if (error) return <div>错误：{error.message}</div>
12
  return <ul>{data.map(post => <li key={post.id}>{post.title}</li>)}</ul>
13
}