ReduxAsyncThunk，API一直回應掛起

我正在創建一個關于目標跟蹤器的應用程式。當我從帳戶注銷時，一切正常，除了注銷卡在掛起狀態。

控制臺說也有錯誤Cannot read properties of null (reading 'token') Dashboard.jsx:20。

儀表板.jsx

import React from 'react';
import { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import GoalForm from '../components/GoalForm';
import Spinner from '../components/Spinner';
import { getGoals, reset } from '../features/goals/goalSlice';
import GoalItem from '../components/GoalItem';

function Dashboard() {
    const navigate = useNavigate();
    const dispatch = useDispatch();

    const { user } = useSelector(store => store.auth);
    const { goals, isLoading, isError, message } = useSelector(
        store => store.goals,
    );

    useEffect(() => {
        if (isError) console.log(message);
        if (!user) navigate('/login');

        dispatch(getGoals());

        return () => {
            dispatch(reset());
        };
    }, [user, isError, message, navigate, dispatch]);

    if (isLoading) return <Spinner />;

    return (
        <>
            <section className='heading'>
                <h1>Welcome {user && user.name}</h1>
                <p>Goals Dashboard</p>
            </section>
            <GoalForm />

            <section className='content'>
                {goals.length > 0 ? (
                    <div className='goals'>
                        {goals.map(goal => (
                            <GoalItem key={goal._id} goal={goal} />
                        ))}
                    </div>
                ) : (
                    <h3>You have not set any goals</h3>
                )}
            </section>
        </>
    );
}

export default Dashboard;

目標切片.js

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import goalService from './goalService';

const initialState = {
    goals: [],
    isError: false,
    isSuccess: false,
    isLoading: false,
    message: '',
};

// Create goal
export const createGoal = createAsyncThunk(
    'goals/create',
    async (goalData, thunkAPI) => {
        try {
            const token = thunkAPI.getState().auth.user.token;

            return await goalService.createGoal(goalData, token);
        } catch (error) {
            const message =
                (error.response &&
                    error.response.data &&
                    error.response.data.message) ||
                error.message ||
                error.toString();

            return thunkAPI.rejectWithValue(message);
        }
    },
);

// Get Goals
export const getGoals = createAsyncThunk('goals/get', async (_, thunkAPI) => {
    try {
        const token = thunkAPI.getState().auth.user.token;

        return await goalService.getGoals(token);
    } catch (error) {
        const message =
            (error.response && error.response.data && error.response.data.message) ||
            error.message ||
            error.toString();

        return thunkAPI.rejectWithValue(message);
    }
});

// Delete goal
export const deleteGoal = createAsyncThunk(
    'goals/delete',
    async (id, thunkAPI) => {
        try {
            const token = thunkAPI.getState().auth.user.token;
            return await goalService.deleteGoal(id, token);
        } catch (error) {
            const message =
                (error.response &&
                    error.response.data &&
                    error.response.data.message) ||
                error.message ||
                error.toString();
            return thunkAPI.rejectWithValue(message);
        }
    },
);

export const goalSlice = createSlice({
    name: 'goal',
    initialState,
    reducers: {
        reset: state => initialState,
    },
    extraReducers: builder => {
        builder
            .addCase(createGoal.pending, state => {
                state.isLoading = true;
            })
            .addCase(createGoal.fulfilled, (state, action) => {
                state.isLoading = false;
                state.isSuccess = true;
                state.goals.push(action.payload);
            })
            .addCase(createGoal.rejected, (state, action) => {
                state.isLoading = false;
                state.isError = true;
                state.message = action.payload;
            })
            .addCase(getGoals.pending, state => {
                state.isLoading = true;
            })
            .addCase(getGoals.fulfilled, (state, action) => {
                state.isLoading = false;
                state.isSuccess = true;
                state.goals = action.payload;
            })
            .addCase(getGoals.rejected, (state, action) => {
                state.isLoading = false;
                state.isError = true;
                state.message = action.payload;
            })
            .addCase(deleteGoal.pending, state => {
                state.isLoading = true;
            })
            .addCase(deleteGoal.fulfilled, (state, action) => {
                state.isLoading = false;
                state.isSuccess = true;
                state.goals = state.goals.filter(
                    goal => goal._id !== action.payload.id,
                );
            })
            .addCase(deleteGoal.rejected, (state, action) => {
                state.isLoading = false;
                state.isError = true;
                state.message = action.payload;
            });
    },
});

export const { reset } = goalSlice.actions;
export default goalSlice.reducer;

目標服務.js

import axios from 'axios';

const API_URL = '/api/goals';

// Create goal
const createGoal = async (goalData, token) => {
    const config = {
        headers: {
            'x-auth-token': `${token}`,
        },
    };

    const response = await axios.post(API_URL, goalData, config);

    return response.data;
};

// Get goals
const getGoals = async token => {
    const config = {
        headers: {
            'x-auth-token': `${token}`,
        },
    };

    const response = await axios.get(API_URL, config);

    return response.data;
};

// Delete goal
const deleteGoal = async (goalId, token) => {
    const config = {
        headers: {
            'x-auth-token': `${token}`,
        },
    };

    const response = await axios.get(`${API_URL}/${goalId}`, config);
    // console.log(response);

    return response.data;
};

const goalService = {
    createGoal,
    getGoals,
    deleteGoal,
};

export default goalService;

這是注銷部分：builder.addCase(logout.fulfilled, state => {state.user = null}); 當我嘗試注銷時，用戶已注銷但錯誤不斷出現，就像重新渲染頁面一樣。頁面會自行重新渲染，并且狀態卡在注銷中。 洗掉目標也不起作用

uj5u.com熱心網友回復：

在嘗試獲取目標之前，您必須檢查用戶是否已登錄

useEffect(() => {
        if (isError) console.log(message);

        if (!user) {
           navigate('/login');
        } else {
           dispatch(getGoals());
        }

        return () => {
            dispatch(reset());
        };
    }, [user, isError, message, navigate, dispatch]);

標籤：javascript 反应 还原 redux-thunk

上一篇：使用腳本洗掉$登錄表格

下一篇：如何將JSON物件附加到JSON物件？[復制]