v2ex_1035266.tsx

import { useState } from 'react';
import useSWR from 'swr';

const fetchMoreData = async (count: number) => {
    await new Promise((resolve) => setTimeout(resolve, count * 100));
    return count
}

export default function Demo() {
    const [count, setCount] = useState(0);
    const { data, error, isLoading } = useSWR(`count-${count}-swr`, async () => {
        if (count == 5) {
            throw new Error("count is 5")
        }
        return await fetchMoreData(count)
    })

    const handleClick = () => {
        setCount(0);
    };

    if (isLoading) return <div>Loading...</div>
    if (error) return <div>{`${error}`}</div>

    return (<div >
        <div>{data}</div>

        <button onClick={() => setCount(count + 1)}>+</button>

        <button onClick={handleClick}>handleClick</button>
    </div>)

}