Использование операторов распространения для избыточности в реакции?Проблемы с отображением массива?

Question

Я сейчас пересматриваю свое понимание редукса и реагирую. Компоненты React работают, и у меня есть настройка базы данных knex вместе с ней. У меня есть редуктор, используя следующий синтаксис.

import { FETCH_POSTS, NEW_POST } from '../actions/types';

const initialState = {
  items: [],
  item: {}
}

export default function(state = initialState, action) {
  switch (action.type) {
    case FETCH_POSTS:
        return {
        ...state,
        items: action.payload
    };
      case NEW_POST:
      return {
        ...state,
        item: action.payload
     };
    default:
      return state;
  }
}

Вот ошибка, которую я получаю. Кажется, ему не нравится оператор распространения.

bundle.js:445 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:/workspace/study-related-projects/apistudy7112018/1.0/client/reducers/postReducer.js: Unexpected token (18:8)

Ему не нравится текущий синтаксис, который я использую, который использовался в этом видеоуроке от Traversy Media здесь . Преподаватель реализует промежуточное ПО иначе, чем я, но не думал, что это будет проблемой. Итак, просто, я решил нажать на массив элементов, как в редукторе:

import { FETCH_POSTS, NEW_POST } from '../actions/types';

const initialState = {
  items: [],
  item: {}
}

export default function(state = initialState, action) {
  switch (action.type) {
    case FETCH_POSTS:
      return state.items.push(action.payload)
    default:
      return state;
  }
}

вместо возвращаемого объекта с оператором распространения.

, а затем вызовите dispatch в функции componentWillMount () в реакции.

Что получилось хорошо, однако теперь стало сложнее отобразить массив для распечатки данных в компоненте.

Если я веду консольный журнал this.props.payload.posts, я получаю элементы, но я не уверен, что смогу получить к нему доступ, потому что следующий массив после записей не имеет имени, просто номер 0. Я попробовал this.props.payload. posts [0], но это не сработало. Это вызывает у меня проблемы с отображением данных с помощью функции массива карты.

Обычно, если все прошло успешно, я могу использовать функцию mapToProps, тогда:

this.props.items.posts.map(post) => {
  return post.name
})

Но я столкнулся с этими двумя решениями. Эта проблема возникла из-за того, что я пытался реализовать другой способ использования избыточности, в отличие от того, к чему я привык раньше. Это все для моей учебы и тренировок.

Может ли кто-нибудь помочь мне понять эти две проблемы? Во-первых, javascript не нравится синтаксис оператора распространения, который я использую, и выкладывает эту ошибку. Во-вторых, попытка получить необработанные данные через массив элементов. Если бы кто-нибудь мог мне помочь, я был бы очень благодарен Спасибо.

Редактировать: Я могу немного сделать git-репо, чтобы все могли видеть код, над которым я работаю.

Answer 1

Предполагая, что вы используете Babel и webpack для переноса и связывания вашего исходного кода соответственно, важно отметить, что по умолчанию оператор распространения в ES2015 не поддерживается для объектов, только для массивов; поддержка операторов распространения объектов все еще остается предложением Stage 3 в TC39 .

Для поддержки объектов вам нужно использовать плагин Babel @babel/plugin-proposal-object-rest-spread (для Babel 7). Это должно позаботиться об ошибке Unexpected token.

Для вашего другого примера с push я рекомендую не использовать методы массива, которые изменяют массив. Это противоречит одному из трех основных принципов Redux, касающихся чистых функций . Ваши редукторы должны быть чистыми, чтобы сохранять ваше состояние неизменным, поскольку каждое изменение вашего состояния (отправленное действие) представляет собой снимок вашего состояния.

Вместо использования push для массивов вы можете использовать оператор распространения:

return {
  ...state,
  items: [
    ...state.items,
    action.payload,
  ],
};

(или что-то в этом роде)

Еще одно замечание: не полагайтесь на componentWillMount() слишком долго; он был объявлен устаревшим в React 16.3 и будет полностью удален в React 17. См. https://reactjs.org/docs/react-component.html#unsafe_componentwillmount для получения дополнительной информации. Если вы извлекаете данные с помощью AJAX или другого асинхронного метода, лучше вместо этого использовать componentDidMount () .

Answer 2

Например, из первого кода я рискну предположить, что action.payload является массивом, поэтому во втором случае вам нужно передать содержимое массива

case FETCH_POSTS:
  return state.items.push(...action.payload)

но я также рекомендую не использовать мутирование состояния