时间戳

首页 > 解决方案 > React Redux 错误：操作必须是普通对象。使用自定义中间件进行异步操作

reactjs - React Redux 错误：操作必须是普通对象。使用自定义中间件进行异步操作

问题描述

以前，我使用相同的方式在后端（springboot）中成功调用了另一个 API，但是创建一个新调用时我收到错误：“操作必须是普通对象。使用自定义中间件进行异步操作”。我尝试了很多其他人的答案，但没有运气。有谁知道发生了什么？提前非常感谢。

行动：

export function getAllValuesAction(listId, player) {
    return async (dispatch) => {
        dispatch( getAllValues() );
        try {
            const token = localStorage.getItem('token');
            if(token) {
                tokenAuth(token);
            }
            const answer = await clientAxios.post(`/pays/sum/player/${listId}`, player);
            dispatch( obtenerSumaPagosJugListaExito(answer.data) );
        } catch (error) {
            dispatch( getAllValuesError() );
        }
    }
}

const getAllValues = () => ({
    type: START_GETTING_VALUES,
    payload: true
});
const getAllValuesSuccess = sumaPago => ({
    type: GETTING_VALUES_SUCCESS,
    payload: answer
});
const getAllValuesError = sumaPago => ({
    type: GETTING_VALUES_ERROR
});

店铺：

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducers';
const store = createStore(
    reducer, 
    compose( applyMiddleware(thunk), 
        typeof window === 'object' &&
            typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined' ? 
                window.__REDUX_DEVTOOLS_EXTENSION__() : f => f
    )
);
export default store;

令牌认证：

import clientAxios from './axios';
const tokenAuth = token => {
    if(token) {
          clienteAxios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    } else {
        delete clienteAxios.defaults.headers.common['Authorization'];
    }
}
export default tokenAuth;

const clientAxios = axios.create({
    baseURL: process.env.REACT_APP_BACKEND_URL
});
export default clientAxios;

加：

如果有人也知道（但至少我只需要知道第一个“react redux 错误”问题）：当我在调用中使用 GET 时，我会收到错误消息而没有响应。当我使用 POST（如下面“控制器”中的示例）时，我首先收到响应，然后收到错误消息。

接收请求的springboot控制器：

@PostMapping("/pays/sum/player/{listId}")
public Double getSumPayPlayerList(@RequestHeader (name="Authorization") String token, @PathVariable long listId, @RequestBody Player player ) {...}

Pay 存储库对数据库进行查询：

@Query("select SUM(g.import) from Pay g where g.listId=?1 and g.player=?2")
public Double sumPaysByPlayerList(Long listId, Player player);

谢谢 ！

标签： reactjsredux

解决方案

我发现问题是因为我试图在模态中显示该信息。由于某种原因，这种情况会产生一些延迟或不同步，因此必须删除模态并找到另一种显示信息的方式。谢谢大家的帮助。

推荐阅读