加载态 / 错误态 / 竞态处理

type RequestState<T> =
  | { status: "idle" }                  // 还没发起
  | { status: "loading" }               // 进行中，没有数据
  | { status: "success"; data: T }      // 只有这个分支摸得到 data
  | { status: "error"; error: Error };  // 只有这个分支摸得到 error

// 不收窄就写 state.data？编译报错：Property 'data' does not exist
function render(state: RequestState<string[]>) {
  if (state.status === "success") console.log(state.data); // 收窄后 data 一定存在
}

import { useQuery } from "@tanstack/react-query";
import { fetchUsers } from "./api";

function UserList() {
  const { data, isPending, isError, error, refetch } = useQuery({
    queryKey: ["users"],
    queryFn: fetchUsers,
  });

  // 第一分支：加载态。列表位置可预估，用骨架占位防布局跳动
  if (isPending) {
    return <div className="skeleton" />;
  }

  // 第二分支：错误态。说人话 + 给重试出口
  if (isError) {
    return (
      <div>
        <p>加载失败：{error.message}</p>
        <button onClick={() => refetch()}>重试</button>
      </div>
    );
  }

  // 第三分支：成功但空。空态是成功，单独设计
  if (data.length === 0) {
    return <p>还没有任何用户，去创建第一个吧</p>;
  }

  // 第四分支：成功有数据。到这里 data 一定不是 undefined
  return <ul>{data.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
}

useEffect(() => {
  const controller = new AbortController();
  let ignore = false;

  fetch(`/api/users?keyword=${keyword}`, { signal: controller.signal })
    .then((res) => res.json())
    .then((data) => { if (!ignore) setUsers(data); })
    .catch((err) => { if (err.name !== "AbortError") setError(err); });

  return () => {
    ignore = true;        // 过期响应不许写 state
    controller.abort();   // 真取消请求，省流量
  };
}, [keyword]);

import { useQuery } from "@tanstack/react-query";

function SearchResults({ keyword }: { keyword: string }) {
  const { data, isPending } = useQuery({
    queryKey: ["users", "search", keyword],  // 每个关键词一条独立缓存
    // signal 接进 fetch：key 变化或卸载时，请求真被取消
    queryFn: ({ signal }) =>
      fetch(`/api/users?keyword=${encodeURIComponent(keyword)}`, { signal })
        .then((res) =>
          res.ok ? res.json() : Promise.reject(new Error(`HTTP ${res.status}`))
        ),
  });

  return isPending
    ? <p>搜索中…</p>
    : <p>共 {data?.length ?? 0} 条结果</p>;
}

import { useEffect, useState } from "react";

export function useDebounce<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);  // 值再变就重置计时器
  }, [value, delay]);

  return debounced;
}

import { useState } from "react";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { useDebounce } from "../hooks/useDebounce";
import { searchUsers, type User } from "./api";

function SearchBox() {
  const [keyword, setKeyword] = useState("");
  const debounced = useDebounce(keyword, 300);  // 停止输入 300ms 才生效

  const { data, isPending } = useQuery({
    // 防抖值进 key：每个关键词一条缓存，竞态天然消失
    queryKey: ["users", "search", debounced],
    queryFn: ({ signal }) => searchUsers(debounced, signal),
    // 空白搜索不发请求：没输入就别惊动后端
    enabled: debounced.trim().length > 0,
    // 换关键词重取时先显示上一次结果，列表不闪烁
    placeholderData: keepPreviousData,
  });

  return (
    <div>
      <input value={keyword} onChange={(e) => setKeyword(e.target.value)} />
      {isPending ? <p>搜索中…</p> : data?.map((u: User) => <p key={u.id}>{u.name}</p>)}
    </div>
  );
}

import { ErrorBoundary } from "react-error-boundary";

<ErrorBoundary fallback={<p>页面开小差了，请刷新重试</p>}>
  <App />
</ErrorBoundary>