Я работаю со списком флажков, где у меня есть 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
.