从减速器中的数组中删除重复项的最佳做法是什么?
What is the best practice to remove duplicate items from an array in a reducer?
我不熟悉使用 reducer 来存储数据,并且偶然发现了一个问题。我目前有一个复选框列表,当单击这些复选框时,它会分派一个操作以将它们存储在我的 reducer 中的一个数组中。然而,目前,我可以保留 checking/unchecking 并且相同的值将继续被推送到数组。
如何防止这种情况发生?我是否以某种方式在 reducer 内部或复选框上的 handleChange 事件中过滤掉?
我添加了一小段我当前的代码
谢谢!
function handleCheckboxChange(e) {
if (e.target.checked) {
checkboxContext.dispatch({
type: 'SET_PROPERTY_TYPE',
payload: { [e.target.name]: e.target.checked }
});
}
}
const FilterCheckbox = ({ name, value, handleChange, checkedItems }) => (
<Label>
<FilterInput
type="checkbox"
name={name}
value={value}
onChange={handleChange}
checked={checkedItems[name]}
/>
{name}
</Label>
);
export default FilterCheckbox;
// Sets the selected value...
case 'SET_PROPERTY_TYPE':
return {
...state,
propertyType: [...state.propertyType, action.payload]
};
是的,您可以过滤 state.propertyType
以删除所有重复项。
// Sets the selected value...
case 'SET_PROPERTY_TYPE':
return {
...state,
propertyType: [
...state.propertyType.filter((value) =>
Object.keys(value)[0] !== Object.keys(action.payload)[0]),
action.payload
]
};
您也可以将 state.propertyType
更改为一个对象以使事情变得更好:
function handleCheckboxChange(e) {
checkboxContext.dispatch({
type: 'SET_PROPERTY_TYPE',
payload: { [e.target.name]: e.target.checked }
});
}
const FilterCheckbox = ({ name, value, handleChange, checkedItems }) => (
<Label>
<FilterInput
type="checkbox"
name={name}
value={value}
onChange={handleChange}
checked={checkedItems[name]}
/>
{name}
</Label>
);
export default FilterCheckbox;
// Sets the selected value...
case 'SET_PROPERTY_TYPE':
return {
...state,
propertyType: {
...state.propertyType,
...action.payload
}
};
您还需要更改 FilterCheckbox
从州映射的方式。
我不熟悉使用 reducer 来存储数据,并且偶然发现了一个问题。我目前有一个复选框列表,当单击这些复选框时,它会分派一个操作以将它们存储在我的 reducer 中的一个数组中。然而,目前,我可以保留 checking/unchecking 并且相同的值将继续被推送到数组。
如何防止这种情况发生?我是否以某种方式在 reducer 内部或复选框上的 handleChange 事件中过滤掉?
我添加了一小段我当前的代码
谢谢!
function handleCheckboxChange(e) {
if (e.target.checked) {
checkboxContext.dispatch({
type: 'SET_PROPERTY_TYPE',
payload: { [e.target.name]: e.target.checked }
});
}
}
const FilterCheckbox = ({ name, value, handleChange, checkedItems }) => (
<Label>
<FilterInput
type="checkbox"
name={name}
value={value}
onChange={handleChange}
checked={checkedItems[name]}
/>
{name}
</Label>
);
export default FilterCheckbox;
// Sets the selected value...
case 'SET_PROPERTY_TYPE':
return {
...state,
propertyType: [...state.propertyType, action.payload]
};
是的,您可以过滤 state.propertyType
以删除所有重复项。
// Sets the selected value...
case 'SET_PROPERTY_TYPE':
return {
...state,
propertyType: [
...state.propertyType.filter((value) =>
Object.keys(value)[0] !== Object.keys(action.payload)[0]),
action.payload
]
};
您也可以将 state.propertyType
更改为一个对象以使事情变得更好:
function handleCheckboxChange(e) {
checkboxContext.dispatch({
type: 'SET_PROPERTY_TYPE',
payload: { [e.target.name]: e.target.checked }
});
}
const FilterCheckbox = ({ name, value, handleChange, checkedItems }) => (
<Label>
<FilterInput
type="checkbox"
name={name}
value={value}
onChange={handleChange}
checked={checkedItems[name]}
/>
{name}
</Label>
);
export default FilterCheckbox;
// Sets the selected value...
case 'SET_PROPERTY_TYPE':
return {
...state,
propertyType: {
...state.propertyType,
...action.payload
}
};
您还需要更改 FilterCheckbox
从州映射的方式。