React Redux Неожиданный токен, ожидается ","

Я использую React с react-redux и redux-actions.

У меня есть следующий редуктор, который постоянно говорит мне

unexpected token, expected ","

но я не знаю почему.

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" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
681
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы пытаетесь включить переменную в объект без ключа:

// 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
}

Ах. Я сейчас в классе, но когда выйду, я попробую. Я определенно думаю, что вы правы, теперь, когда я это слышу, это имеет большой смысл. state.comments - это объект объектов, поэтому я считаю, что мне нужно деструктурировать actions.payload в комментарии. Мы проверим и свяжемся с вами.

CHBresser 02.10.2018 01:27

Вы были правы. Мне удалось решить проблему, сначала нормализовав данные, а затем деструктурируя actions.payload в новое состояние комментариев.

CHBresser 02.10.2018 04:51

Другие вопросы по теме