从减速器中的数组中删除重复项的最佳做法是什么？

Question

我是使用 reducer 存储数据的新手，并且偶然发现了一个问题。我目前有一个复选框列表，当单击这些复选框时，它会调度一个动作以将它们存储在我的减速器的数组中。但是，目前，我可以继续检查/取消检查，并且将继续将相同的值推送到数组中。

如何防止这种情况发生？我是否以某种方式在减速器内部或复选框上的 handleChange 事件中过滤掉？

我添加了我当前代码的一个小sn-p

谢谢！

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]
      };

Answer 1

是的，您可以过滤您的 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 从状态映射的方式。