未捕获错误：操作必须是普通对象。相反，实际类型是：'Promise'

Question

我有一个客户端问题。服务器端运行良好，deleteCourse方法删除了课程，但我收到了您在客户端标题中看到的错误。我不确定发生了什么。如果我需要提供其他东西，只需问：D

/动作/课程.js

export const deleteCourse = (id) => async (dispatch) => {
try {
await api.deleteCourse(id);
dispatch({ type: DELETE, payload: id });
} catch (error) {
console.log(error);
}
};

/减速器/课程.js

import { FETCH_ALL, CREATE, UPDATE, DELETE } from '../../constants/actionTypes';
export default (courses = [], action) => {
switch (action.type) {
case FETCH_ALL:
return action.payload;
case CREATE:
return [...courses, action.payload];
case UPDATE:
return courses.map((course) =>
course._id === action.payload._id ? action.payload : course
);
case DELETE:
return courses.filter((course) => course._id !== action.payload);
default:
return courses;
}
};

/api/index.js

import axios from 'axios';
//Our route
const API = axios.create({ baseURL: 'http://localhost:5000' });
//Occurse before all the bellow requests
//Za google je result a za klasican je token
API.interceptors.request.use((req) => {
if (localStorage.getItem('profile'))
req.headers['Authorization'] = `Bearer ${
JSON.parse(localStorage.getItem('profile')).token
}`;
return req;
});
export const signIn = (formData) => API.post('/user/signIn', formData);
export const signUp = (formData) => API.post('/user/signUp', formData);
export const fetchCourses = () => API.get('/courses');
export const createCourse = (newCourse) => API.post('/courses', newCourse);
export const updateCourse = (id, updatedCourse) =>
API.patch(`./courses/${id}`, updatedCourse);
export const deleteCourse = (id) => API.delete(`./courses/${id}`);

/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducers from '../src/api/reducers';
const store = createStore(reducers, compose(applyMiddleware(thunk)));
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);

/启动动作的按钮

<Button size="small" color="primary" onClick={() => {
dispatch(deleteCourse(course._id))}}><DeleteIcon fontSize="small" /> Delete</Button>

我试着安慰.log deleteCourse，我发现这是一个坚定的承诺。现在我在youtube上看了一些课程，并制作了自己的项目，但所有这些都非常适合那个家伙。提前谢谢！

Answer 1

因此，问题出现在调度函数的按钮的文件中。deleteCourse函数在我的后端中的名称相同，因此该文件中的导入是来自后端的函数，而不是来自/actions文件夹的正确函数。