React useApi Hook实战：实现动态加载状态与避免无限循环的策略

import { useState } from "react";

export default function useApi({ method, url }) {
    // loading状态默认初始化为false，表示默认不处于加载中
    const [loading, setLoading] = useState(false);

    const methods = {
        get: function (data = {}) {
            return new Promise((resolve, reject) => {
                setLoading(true); // 在API请求开始前，将loading设为true
                const params = new URLSearchParams(data);
                const queryString = params.toString();
                const fetchUrl = url + (queryString ? "?" + queryString : "");

                fetch(fetchUrl, {
                    method: "get",
                    headers: {
                        "Content-Type": "application/json",
                        "Accept": "application/json",
                    },
                })
                .then(response => response.json())
                .then(data => {
                    if (!data) {
                        setLoading(false); // 如果数据为空，也结束加载状态并拒绝Promise
                        return reject(data);
                    }
                    setLoading(false); // 请求成功，将loading设为false
                    resolve(data);
                })
                .catch(error => {
                    setLoading(false); // 请求失败，将loading设为false
                    console.error("API请求错误:", error);
                    reject(error); // 拒绝Promise，将错误传递出去
                });
            });
        },
        post: function (data = {}) {
            return new Promise((resolve, reject) => {
                setLoading(true); // 在API请求开始前，将loading设为true
                fetch(url, {
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                        "Accept": "application/json",
                    },
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(data => {
                    if (!data) {
                        setLoading(false); // 如果数据为空，也结束加载状态并拒绝Promise
                        return reject(data);
                    }
                    setLoading(false); // 请求成功，将loading设为false
                    resolve(data);
                })
                .catch(error => {
                    setLoading(false); // 请求失败，将loading设为false
                    console.error("API请求错误:", error);
                    reject(error); // 拒绝Promise，将错误传递出去
                });
            });
        }
    };

    if (!(method in methods)) {
        throw new Error(`useApi()的第一个参数'method'不正确，请使用'${Object.keys(methods).join("', '")}'之一。`);
    }

    // 返回当前加载状态和对应的API调用函数
    return [loading, methods[method]];
}

import React, { useState } from 'react';
import useApi from './useApi'; // 假设你的useApi Hook在同级目录下

function UserProfile({ userId }) {
    const [userData, setUserData] = useState(null);
    const [loadingUser, fetchUser] = useApi({ method: 'get', url: `https://api.example.com/users/${userId}` });

    const [postResult, sendPostRequest] = useApi({ method: 'post', url: 'https://api.example.com/posts' });
    const [postMessage, setPostMessage] = useState('');

    // 在组件挂载时或userId变化时获取用户数据
    React.useEffect(() => {
        const loadUserData = async () => {
            try {
                const data = await fetchUser();
                setUserData(data);
            } catch (error) {
                console.error("获取用户数据失败:", error);
            }
        };
        loadUserData();
    }, [userId, fetchUser]); // 依赖fetchUser确保当它变化时重新运行（尽管此处它通常不会变）

    const handleSubmitPost = async (event) => {
        event.preventDefault();
        try {
            const result = await sendPostRequest({ title: 'New Post', content: postMessage });
            alert('帖子发布成功！');
            console.log('Post result:', result);
            setPostMessage('');
        } catch (error) {
            alert('帖子发布失败！');
            console.error("发布帖子失败:", error);
        }
    };

    return (
        <div>
            <h2>用户档案</h2>
            {loadingUser && <p>正在加载用户数据...</p>}
            {userData ? (
                <div>
                    <p>姓名: {userData.name}</p>
                    <p>邮箱: {userData.email}</p>
                    {/* 更多用户详情 */}
                </div>
            ) : (
                !loadingUser && <p>未找到用户数据或加载失败。</p>
            )}

            <h3>发布新帖子</h3>
            <form onSubmit={handleSubmitPost}>
                <textarea
                    value={postMessage}
                    onChange={(e) => setPostMessage(e.target.value)}
                    placeholder="请输入帖子内容"
                    rows="5"
                    cols="50"
                />
                <br />
                <button type="submit" disabled={postResult || !postMessage.trim()}>
                    {postResult ? '正在发布...' : '发布'}
                </button>
            </form>
        </div>
    );
}

export default UserProfile;