Question

我正在使用React和Redux来管理复选框列表的状态。到目前为止，我的工作正常，但eslint向我发送了错误消息：

分配功能参数的属性

所以我想我做错了。

这是组件：

import { toggleCheckboxAction, setCheckboxesToChecked } from '../actions/cancellations';

const CheckboxList = ({
  columnsFilterHandler,
  setCheckboxesToCheckedHandler,
  checkboxes,
  t,
}) => {
  const onChange = (value, id, event) => {
    const item = checkboxes.slice().find(idx => idx.id === id);
    if (item) {
      item.checked = !item.checked;
      columnsFilterHandler(value, id, event.target.value);
      return { checkboxes };
    }
    return item;
  };

  const setCheckboxesToTrue = () => {
    const items = checkboxes.filter(checkbox => checkbox.checked === false);
    items.map(item => {
      if (item) {
        item.checked = !item.checked; // LINE THROWING THE WARNING
        setCheckboxesToCheckedHandler(item.checked);
      }
      return item;
    });
  };

  return (
    <>
      <ToolbarTitle title="Columns" />
      <ToolbarOption>
        <Button kind="ghost" small onClick={setCheckboxesToTrue}>
          {t('cancellations.resetDefault')}
        </Button>
      </ToolbarOption>
      {checkboxes.map(checkbox => (
        <ToolbarOption>
          <Checkbox
            key={checkbox.id}
            id={checkbox.id}
            labelText={checkbox.labelText}
            value={checkbox.value}
            checked={checkbox.checked}
            onChange={onChange}
          />
        </ToolbarOption>
      ))}
    </>
  );
};

CheckboxList.propTypes = {
  columnsFilterHandler: PropTypes.func.isRequired,
  setCheckboxesToCheckedHandler: PropTypes.func.isRequired,
  checkboxes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
};

const mapStateToProps = state => ({
  checkboxes: state.cancellations.checkboxes,
});

export default compose(
  connect(
    mapStateToProps,
    dispatch => ({
      columnsFilterHandler: (value, isChecked, valueName) => {
        dispatch(toggleCheckboxAction(value, isChecked, valueName));
      },
      setCheckboxesToCheckedHandler: isChecked => {
        dispatch(setCheckboxesToChecked(isChecked));
      },
    }),
  ),
)(translate()(CheckboxList));

在onChange功能上，我使用这些复选框，将其设置为checked或!checked。

问题出在setCheckboxesToTrue行上的函数item.checked = !item.checked;

这是动作：

const setCheckboxesToChecked = isChecked => ({
  type: ActionTypes.CHECKED_ALL_CHECKBOXES,
  payload: { isChecked },
});

这是将它们设置为true或false的简化器：

[ActionTypes.TOGGLE_CHECKBOX](state, action) {
    return {
      ...state,
      checkboxes: initialState.checkboxes.map(checkbox => {
        if (checkbox.id !== action.payload.id) {
          return checkbox;
        }
        return {
          ...checkbox,
          checked: !checkbox.checked,
        };
      }),
    };
  },

这应该是将它们全部设置为true的简化器：

[ActionTypes.CHECKED_ALL_CHECKBOXES](state, action) {
    return {
      ...state,
      checkboxes: initialState.checkboxes.map(checkbox => {
        if (checkbox.id !== action.payload.id) {
          return checkbox;
        }
        return {
          ...checkbox,
          checked: checkbox.checked,
        };
      }),
    };
  },

你们知道做我试图做的更好的方法还是解决我遇到的错误的更好方法？

Answer 1

因此，ESLint正是出于其所说的理由而抱怨：您正在修改函数参数的值。尽管这是完全有效的JS，并且可以使用，但强烈建议不要这样做，因为它使创建bug变得非常容易。具体来说：

res = pd.concat([
    pd.DataFrame({
        'zip': r.zip, 'season': r.season, 'date': pd.DatetimeIndex(
            start=r.season_start_date, end=r.season_end_date, freq='D'
        )
    }) for _, r in data.iterrows()
], sort=False)

您应该做的（并且已经在代码的其他地方做过，因此您可能只是忘记了这里）：

items.map(item => {
  if (item) {
    item.checked = !item.checked; // HERE, you modify `item` which is the parameter passed to the map callback function
    setCheckboxesToCheckedHandler(item.checked);
  }
  return item;
});

如何检查真实的复选框列表？

1 个答案: