Добавить динамически переменную объекта в существующее состояние вactjs (используя функциональные компоненты) - PullRequest
Новая
       20

Добавить динамически переменную объекта в существующее состояние вactjs (используя функциональные компоненты)

0 голосов
/ 22 апреля 2019

Я новичок в реагировании и создании небольшого проекта, я использовал функциональные компоненты, а не компоненты класса, и использовал хранилище для состояния.Я добавил некоторую переменную состояния и хочу добавить массив объектов в состоянии выхода, я пытался, но это не работает.Ниже файл моего магазина, где установлено состояние: 

export const initialState = {
  validationTally: 0,
  token: '',
  multiForm : []
  }

  // action types
const SET_VALIDATION_TALLY = 'SET_VALIDATION_TALLY';
const SET_TOKEN = 'SET_TOKEN';
const SET_MULTIFORM = 'SET_MULTIFORM';

export const reducer = (state, action) => {
    switch (action.type) {
        case SET_VALIDATION_TALLY:
          return {
            ...state,
            validationTally: state.validationTally + 1
          };
        case SET_TOKEN:
          return {
            ...state,
            token: action.payload
          };
        case SET_MULTIFORM:
          return {
            ...state,
            multiForm: action.payload
        };
    }
}

export const setValidationTally = () => ({
  type: SET_VALIDATION_TALLY
});

export const setToken = payload => ({
  type: SET_TOKEN,
  payload
});

export const setMultiForm = payload => ({
  type: SET_MULTIFORM,
  payload
});

Я хочу динамически добавлять объект в переменную состояния "multiForm", когда кто-то вводит значение 2, я хочу добавить два объекта в "multiForm", как показано ниже 

export const initialState = {
  validationTally: 0,
  app: '',
  token: '',
  multiForm : [{
    firstName : '',   
    lastName :''
  },
  {
    firstName : '',   
    lastName :''
  }]
  }

1 Ответ

0 голосов
/ 22 апреля 2019

Предполагая, что action.payload для действия SET_MULTIFORM содержит количество полей, которые нужно добавить, вы можете просто отобразить элементы массива и добавить к существующим полям 

case SET_MULTIFORM:
      return {
        ...state,
        multiForm: [...state.multiForm, ...Array.from({ length: action.payload }).map(() => ({firstName: '', lastName: ''}))]
    };
...