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

Question

我不熟悉使用 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]
      };

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 从州映射的方式。

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

What is the best practice to remove duplicate items from an array in a reducer?

reactjs

react-redux

reducers

react-context