在用户界面中更改减速器上复选框阵列的状态

Question

我在React:上有这样的东西

const CheckboxItems = (t) => [ // that t is just a global prop
{
checked: true,
value: 'itemsCancelled',
id: 'checkBoxItemsCancelled',
labelText: t('cancellations.checkBoxItemsCancelled'),
},
{
checked: true,
value: 'requestDate',
id: 'checkboxRequestDate',
labelText: t('cancellations.checkboxRequestDate'),
},
{
checked: true,
value: 'status',
id: 'checkboxStatus',
labelText: t('cancellations.checkboxStatus'),
},
{
checked: true,
value: 'requestedBy',
id: 'checkboxRequestedBy',
labelText: t('cancellations.checkboxRequestedBy'),
},
];
class TableToolbarComp extends React.Component {
state = {
items: CheckboxItems(),
};
onChange = (value, id, event) => {
const { columnsFilterHandler } = this.props;
this.setState(({ items }) => {
const item = items.slice().find(i => i.id === id);
if (item) {
item.checked = !item.checked;
columnsFilterHandler(id, item.value, item.checked);
return { items };
}
});
};
render() {
const { items } = this.state;
return(
<>
{items.map(item => (
<ToolbarOption key={item.id}>
<Checkbox
id={item.id}
labelText={item.labelText}
value={item.value}
checked={item.checked}
onChange={this.onChange}
/>
</ToolbarOption>
))}
</>
)
}
export default compose(
connect(
({ cancellations }) => ({
columnId: cancellations.columnId,
columnValue: cancellations.columnValue,
isChecked: cancellations.isChecked,
}),
dispatch => ({
columnsFilterHandler: (columnId, columnValue, isChecked) => {
dispatch(columnsFilterAction(columnId, columnValue, isChecked));
},
}),
),
)(translate()(TableToolbarComp));

这工作得很好，它正在调度我稍后需要使用的数据。

但我在Redux部分遇到了麻烦，它同时改变了所有复选框的状态，而不是像应该的那样单独改变。因此，一旦我取消选中其中一个复选框，其他3个也会得到checked: false。我在UI上没有看到checked: false的更改，只是在浏览器的Redux控制台上看到了它。

这是我在减速器中的

const initialState = {
checkboxes: [
{
checked: true,
value: 'itemsCancelled',
id: 'checkBoxItemsCancelled',
},
{
checked: true,
value: 'requestDate',
id: 'checkboxRequestDate',
},
{
checked: true,
value: 'status',
id: 'checkboxStatus',
},
{
checked: true,
value: 'requestedBy',
id: 'checkboxRequestedBy',
},
],
}
[ActionTypes.COLUMNS_FILTER](state, action) {
return initialState.checkboxes.map(checkbox => {
if (!checkbox.id === action.payload.id) {
return checkbox;
}
return {
...checkbox,
checked: action.payload.isChecked,
};
});
}

行动：

const columnsFilterAction = (columnId, columnValue, isChecked) => ({
type: ActionTypes.COLUMNS_FILTER,
payload: { columnId, columnValue, isChecked },
});

因此，我所需要知道的是，在Redux处理React时，我必须如何管理这些复选框的状态。我所看到的是，当我切换复选框时，所有复选框都会达到相同的状态。

Answer 1

您有!checkbox.id === action.payload.id作为条件逻辑。由于您所有的复选框ID都是"truthy"，那么这个！checkbox.id的计算结果为false，与写入if(false === action.payload.id)相同。

我怀疑你是想写：if(checkbox.id !== action.payload.id)。

Answer 2

您要做的是传递要在操作中切换的复选框的id。这就是在切换状态的操作中所需要的全部内容。然后，在reducer中，您希望映射到当前状态，并只返回与操作中传递的id不匹配的复选框。当id匹配时，返回一个新选项，将当前复选框的属性扩展到新对象中，并将checked属性设置为相反的属性。

给定此操作：

const TOGGLE_CHECKBOX = 'TOGGLE_CHECKBOX'
function toggleCheckbox(id) {
return {
type: TOGGLE_CHECKBOX,
id
}
}

Actions-Redux-由Redux的作者提供的动作和动作创作者指南。

这个减速器能胜任这项工作。

function checkboxReducer(state = [], action = {}) {
switch(action.type) {
case TOGGLE_CHECKBOX:
return state.map(checkbox => {
if (checkbox.id !== action.id) {
return checkbox;
}
return {
...checkbox,
checked: checkbox.isChecked ? false : true,
}
})
default:
return state;
}
}

Reducers-Redux-Redux作者提供的Reducers指南以及如何处理操作。

下面是一个可以工作的代码沙盒来演示它的工作原理。您可以单击复选框以查看它们是否按预期进行切换。