簡化 React 狀態管理：處理狀態的最佳實踐

有時候，我們必須在react狀態下管理狀態。
例如我們有一個提交表單，我們要管理表單的狀態。

表達狀態的方式有很多種。
我會介紹一下表達身份的壞例子。

壞榜樣

1.用物體來表達狀態。

const Page = () => {
    const [status, setStatus] = useState<{ loading: boolean, error: boolean, success: boolean }>({ loading: false, error: false, success: false });

    const fetchUser = async () => {
        setStatus({ loading: true, error: false, success: false });
        try {
            const user = await api.getUser();
            setStatus({ loading: false, error: false, success: true });
        } catch (e) {
            setStatus({ loading: false, error: true, success: false });
        }
    };

    return (
        <>
            {status.loading && <div>Loading...</div>}
            {status.error && <div>Error...</div>}
            {status.success && <div>Success...</div>}
            <button onClick={fetchUser}>Fetch</button>
        </>
    );
};

這是一個不好的例子，因為狀態非常複雜。
當您更新狀態時，您必須更新所有狀態。

此範例中只有三種狀態模式。

// loading
setStatus({ loading: true, error: false, success: false });

// success
setStatus({ loading: false, error: false, success: true });

// error
setStatus({ loading: false, error: true, success: false });

但當你用一個物件來表達狀態時，讀者無法理解只有三種模式。
所以這是一個壞例子。

2.用索引來表示狀態。

const Page = () => {
    const [status, setStatus] = useState<0 | 1 | 2 | 3>(3);
    const [user, setUser] = useState<User | null>(null);

    const fetchUser = async () => {
        setStatus(0);
        try {
            const user = await api.getUser();
            setUser(user);
            setStatus(2);
        } catch (e) {
            setStatus(1);
        }
    };

    const reset = () => {
        setUser(null);
        setStatus(3);
    };

    return (
        <>
            {status === 0 && <div>Loading...</div>}
            {status === 1 && <div>Error...</div>}
            {status === 2 && <div>{user?.name}</div>}
            <button onClick={fetchUser}>Fetch</button>
            <button onClick={reset}>Reset</button>
        </>
    );
};

這是一個非常簡單的例子。
但這個例子也有一個問題。

當你使用索引來表示狀態時，你必須記住狀態號。
如果您需要新增狀態，則必須更新所有狀態編號。

所以，這也不是一個好例子。

3.為每個狀態建立狀態。

const Page = () => {
    const [loading, setLoading] = useState<boolean>(false);
    const [error, setError] = useState<boolean>(false);
    const [success, setSuccess] = useState<boolean>(false);
    const [user, setUser] = useState<User | null>(null);

    const fetchUser = async () => {
        setLoading(true);
        try {
            const user = await api.getUser();
            setUser(user);
            setSuccess(true);
        } catch (e) {
            setError(true);
        }
    };

    const reset = () => {
        setUser(null);
        setLoading(false);
        setError(false);
        setSuccess(false);
    };

    return (
        <>
            {loading && <div>Loading...</div>}
            {error && <div>Error...</div>}
            {success && <div>{user?.name}</div>}
            <button onClick={fetchUser}>Fetch</button>
            <button onClick={reset}>Reset</button>
        </>
    );
};

這也不是一個好例子。
你必須一直管理函數中的所有狀態。

如果您忘記更新狀態，這將是一個錯誤。
重置功能也很複雜。

推薦

1. 使用字串來表達狀態。

const Page = () => {
    const [status, setStatus] = useState<'loading' | 'error' | 'success' | 'idle'>('idle');
    const [user, setUser] = useState<User | null>(null);

    const fetchUser = async () => {
        setStatus('loading');
        try {
            const user = await api.getUser();
            setUser(user);
            setStatus('success');
        } catch (e) {
            setStatus('error');
        }
    };

    const reset = () => {
        setUser(null);
        setStatus('idle');
    };

    return (
        <>
            {status === 'loading' && <div>Loading...</div>}
            {status === 'error' && <div>Error...</div>}
            {status === 'success' && <div>{user?.name}</div>}
            <button onClick={fetchUser}>Fetch</button>
            <button onClick={reset}>Reset</button>
        </>
    );
};

這是一個非常簡單的例子。
而且您可以輕鬆了解狀態。

當您需要新增狀態時，您可以輕鬆新增狀態。
當然這個例子也有缺點。
無法同時表示載入狀態和成功狀態。
但我覺得這並不是什麼大問題。

所以如果你在react狀態下管理狀態，我建議使用字串來表達狀態。

結論

在react狀態中管理狀態時，使用字串來表達狀態。

這非常簡單易懂。
並且您可以輕鬆新增狀態。

如果使用物件或索引來表達狀態，則在新增狀態時必須更新所有狀態。
所以，我建議使用字串來表達狀態。

感謝您的閱讀。

以上是簡化 React 狀態管理：處理狀態的最佳實踐的詳細內容。更多資訊請關注PHP中文網其他相關文章！