Redux / React: копия объекта не работает - PullRequest
0 голосов
/ 12 декабря 2018

Я работаю со списком флажков, где у меня есть 2 функции;одна для их установки на true или false, а другая функция просто для сброса его значений на true.

У меня проблема с функцией setCheckboxesToTrue (см. ниже).Именно в этой строке, где я создаю переменную для создания экземпляра объекта: const newItem = { ...item };, таким образом, он просто не работает.Это не установка флажков на true.Но если я делаю это таким образом, он работает отлично -> const newItem = item;.

import {
  toggleCheckboxAction,
  setCheckboxesToChecked,
} from '../actions/cancellations';

const CheckboxList = ({
  columnsFilterHandler,
  setCheckboxesToCheckedHandler,
  checkboxes,
  t,
}) => {
  const onChange = (value, id, event) => {
    const item = checkboxes.slice().find(idx => idx.id === id);
    if (item) {
      item.checked = !item.checked;
      columnsFilterHandler(value, id, event.target.value);
      return { checkboxes };
    }
    return item;
  };

  const setCheckboxesToTrue = () => {
    checkboxes.map(item => {
      // Created a copy of item object so eslint not yell
      const newItem = { ...item };
      if (item) {
        setCheckboxesToCheckedHandler(newItem);
        newItem.checked = !item.checked;
        console.log('newItem -->', newItem);
      }
      return newItem;
    });
  };

  return (
    <>
      <ToolbarOption>
        <Button kind="ghost" small onClick={setCheckboxesToTrue}>
          {t('cancellations.resetDefault')}
        </Button>
      </ToolbarOption>
      {checkboxes.map(checkbox => (
        <ToolbarOption>
          <Checkbox
            key={checkbox.id}
            id={checkbox.id}
            value={checkbox.value}
            checked={checkbox.checked}
            onChange={onChange}
          />
        </ToolbarOption>
      ))}
    </>
  );
};

CheckboxList.propTypes = {
  columnsFilterHandler: PropTypes.func.isRequired,
  setCheckboxesToCheckedHandler: PropTypes.func.isRequired,
  checkboxes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
};

const mapStateToProps = state => ({
  checkboxes: state.cancellations.checkboxes,
});

export default compose(
  connect(
    mapStateToProps,
    dispatch => ({
      columnsFilterHandler: (value, isChecked, valueName) => {
        dispatch(toggleCheckboxAction(value, isChecked, valueName));
      },
      setCheckboxesToCheckedHandler: isChecked => {
        dispatch(setCheckboxesToChecked(isChecked));
      },
    }),
  ),
)(translate()(CheckboxList));

Ниже приведены действия, в которых я переключаю значение флажка на true или false и setCheckboxesToChecked, чтобы проверить ихвсе к true.

const toggleCheckboxAction = (isChecked, value, valueName) => ({
  type: ActionTypes.TOGGLE_CHECKBOX,
  payload: { isChecked, value, valueName },
});

const setCheckboxesToChecked = isChecked => ({
  type: ActionTypes.CHECKED_ALL_CHECKBOXES,
  payload: { isChecked },
});

А вот и редукторы для них обоих тоже:

  [ActionTypes.TOGGLE_CHECKBOX](state, action) {
    return {
      ...state,
      checkboxes: initialState.checkboxes.map(checkbox => {
        if (checkbox.id !== action.payload.id) {
          return checkbox;
        }
        return {
          ...checkbox,
          checked: !checkbox.checked,
        };
      }),
    };
  },

  [ActionTypes.CHECKED_ALL_CHECKBOXES](state, action) {
    return {
      ...state,
      checkboxes: initialState.checkboxes.map(checkbox => {
        if (checkbox.id !== action.payload.id) {
          return checkbox;
        }
        return {
          ...checkbox,
          checked: checkbox.checked,
        };
      }),
    };
  },

Итак, что может быть не так?

Вфункция setCheckboxesToTrue есть консольный журнал -> console.log('newItem -->', newItem);, который возвращает это каждый раз, когда я вызываю ту же самую функцию:

newItem --> {checked: false, value: "itemsCancelled", id: "checkBoxItemsCancelled", labelText: "# of Items Cancelled"}
newItem --> {checked: false, value: "requestDate", id: "checkboxRequestDate", labelText: "Request Date"}
newItem --> {checked: false, value: "status", id: "checkboxStatus", labelText: "Status"}
newItem --> {checked: false, value: "requestedBy", id: "checkboxRequestedBy", labelText: "Requested By"}

возвращает checked: false, потому что к тому моменту все флажки были false.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...