React + Redux：未處理的拒絕（TypeError）：散布不可迭代實例的無效嘗試

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}));實際上，它會遍歷原始對象的鍵並復制原始的鍵/值對變成新的對象文字。

從MDN

對於函數調用： myFunction(...iterableObj);

對於數組文字或字符串： [...iterableObj, '4', 'five', 6];

對於對象字面量（ECMAScript 2018中的新增功能）： let objClone = { ...obj };