在UI中更改reducer上复选框数组的状态时，对其状态进行更改
我在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上工作时，我需要做什么来管理Redux上这些复选框的状态。因为我所看到的是，当我切换复选框时，它们都会达到相同的状态。
回答 2
Stack Overflow用户
发布于 2018-12-11 05:55:50
您要做的是传递要在操作中切换的复选框的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和如何处理操作的指南。
下面是一个有效的Code Sandbox来演示它的工作原理。您可以单击复选框以查看它们是否按预期进行切换。
Stack Overflow用户
发布于 2018-12-11 05:58:40
您使用!checkbox.id === action.payload.id作为条件逻辑。由于您所有的checkbox is都是“the”，因此this !checkbox.id的计算结果为false，并且与编写if(false === action.payload.id)相同。
我猜你是想写：if(checkbox.id !== action.payload.id)。
https://stackoverflow.com/questions/53714069
复制相似问题