React Redux予期しないトークン、予期される "、"

debugcn 投稿 Dev

CHBresser

私はreactをreact-reduxとredux-actionsで使用しています。

私は私に言い続ける次のレデューサーを持っています

予期しないトークン、予期される「、」

でも理由はわかりません。

comments.js (reducer):

import { handleActions } from "redux-actions";
import {
  GET_COMMENTS,
  SET_COMMENTS,
  ADD_COMMENT
} from "../constants/actionTypes";

export default handleActions(
  {
    [GET_COMMENTS]: (state, action) => state,
    [ADD_COMMENT]: (state, action) => {
      const comments = {
        ...state.comments,
        action.payload
      };
      return {
        ...state,
        comments
      };
    },
    [SET_COMMENTS]: (state, action) =>
      Boolean(action.payload) ? action.payload : state
  },
  {}
);

トラブルの原因となるアクションはADD_COMMENTです。私はそれを次の方法で試しました：

[ADD_COMMENT]: (state, action) => {
  ...state,
  comments: {
    ...state,
    action.payload
  }
}

または

[ADD_COMMENT]: (state, action) => ({
      ...state,
      comments: {
        ...state,
        action.payload
      }
})

と同様：

[ADD_COMMENT]: (state, action) => {
  return {
      ...state,
      comments: {
        ...state,
        action.payload
      }
  }
}

コードが正しくない理由がわかりません。アトムのリンターがアクションとペイロードの間に点があると言っていますが、よくわかりません。

アクション作成者は、ADD_COMMENTのタイプと個々のコメントのペイロードを次の形式で返すだけです。

{
    "id": 3,
    "parent": 1,
    "author": "admin",
    "author_is_staff": true,
    "content": "This is a test comment using the API rather than the Admin page, with author specified, with view changed"
}

コアリーワード

キーのないオブジェクトに変数を含めようとしています。

// This is fine
const comments = {
  ...state.comments
}

// This is not
const comments = {
  actions.payload
}

// Possible alternative:
const comments = {
  ...state.comments,
  payload: actions.payload
}

// Or if you want to destructure `actions.payload`:
const comments = {
  ...state.comments,
  ...actions.payload
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]