Question

因此，我试图通过axios实施一项使我的Rails后端异步使当前用户联机的操作。当它成功给出响应时：我收到以下错误：

Unhandled Rejection (TypeError): Invalid attempt to spread non-iterable instance

这是response.data的样子：

user: {
id: 4,
first_name: Julien,
last_name: Corb,
is_subscribed: true
}

store.js：

import { createStore, applyMiddleware } from "redux";
import thunk from 'redux-thunk';
import rootReducer from "./reducers";

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

export default store;

actions.js

import { CREATE_USER, PROPAGATE_LOGIN, PROPAGATE_LOGOUT } from "./actionTypes";
import axios from 'axios';

export const getCurrentUser = () => {
  return dispatch => {
    axios.get("/users/get_current_user", {})
    .then(response => {
      if (response.data.user) {
        dispatch(propagateLogin(...response.data)); //the error occurs here
      } else {
         dispatch(propagateLogout());
       }
    });
  };
};

export const propagateLogin = (user) => ({
  type: PROPAGATE_LOGIN,
  payload: {
    user
  }
});

export const propagateLogout = () => ({
  type: PROPAGATE_LOGOUT,
  payload: { }
});

users.js精简器：

import { CREATE_USER, PROPAGATE_LOGIN, PROPAGATE_LOGOUT } from "../actionTypes";

const initialState = {
  user: null
};

export default function(state = initialState, action) {
  switch (action.type) {
    case CREATE_USER: {

    }
    case PROPAGATE_LOGIN: {
      return {
        ...state,
        user: action.payload
      }
    }
    case PROPAGATE_LOGOUT: {
      return {
        ...state,
        user: null
      }
    }
    default:
      return state;
  }
}

这是我第一次收到此错误，我觉得将初始用户状态设置为null有点问题；但问题可能还出在其他地方。

Answer 1

看来您已经找到解决特定问题的方法，但这是错误的解释：

在您的示例中，您尝试使用用于可迭代对象的语法来扩展对象。对象扩展的正确语法为const clone = {...original}（在OP中为dispatch(propagateLogin({...response.data}));），它本质上遍历原始对象的键，并将原始的键/值对复制到一个新的对象文字。

From MDN

对于函数调用： myFunction(...iterableObj);

对于数组文字或字符串： [...iterableObj, '4', 'five', 6];

对于对象文字（ECMAScript 2018中的新增功能）： let objClone = { ...obj };

React + Redux：未处理的拒绝（TypeError）：散布不可迭代实例的无效尝试

1 个答案: