Question

我有一个onChange方法，不会更新我的redux状态。如果我在onChange内console.log看起来不错，但是在onChange之外，什么也没发生，所以我不明白为什么。我正在尝试清除一些错误，但是在我的redux存储中什么也没有发生。

以下是一些代码：

  const onChange = (e) => {
    let errors = reportIncidentState.errors || {};
    const { attr } = e.target.dataset;
    const updates = { [attr]: e.target.value };
    const clearErrors = (keys = []) => {
      errors = Object.keys(errors)
        .reduce((prev, curr) => ((typeof keys === 'string' && keys === curr)
          || keys.indexOf(curr) > -1
          ? prev : { ...prev, [curr]: errors[curr] }),
        {});
    };

    clearErrors(attr);
    switch (attr) {
      case 'partialSick':
        updates[attr] = true;
        updates.fullsick = false;
        clearErrors(['partialSick', 'fullsick']);
        break;
      case 'fullsick':
        updates[attr] = true;
        updates.partialSick = false;
        clearErrors(['partialSick', 'fullsick']);
        break;
      case 'unsureOfDate':
        updates[attr] = e.target.value;
        clearErrors(['dayofSickness', 'additionalInformation']);
        break;
      case 'hasQuit':
        updates[attr] = e.target.value;
        clearErrors(['quitDate']);
        break;
      default:
        break;
    }

    reportIncidentUiActions.updateErrors({ errors });
    reportIncidentUiActions.updateIncidentUpdate(updates);
  };

减速器：

    case UPDATE_ERRORS:
      return {
        ...state,
        errors: {
          ...state.errors,
          ...action.payload.errors,
        },
        update: {
          ...state.update,
          ...action.payload.updates,
        },
      };

动作：

export const updateErrors = ({ errors: errs }) => (
  {
    type: UPDATE_ERRORS,
    payload: { errors: errs },
  }
);

我希望，如果尚未单击按钮，但需要单击，将显示错误，并且确实会出现。然后，我希望单击该按钮时错误会消失，但不会消失。而且在我的redux商店中，错误仍然存在。

Answer 1

我认为只是因为这里：

return {
    ...state,
    errors: {
      ...state.errors,
      ...action.payload.errors,
    },

您正在合并现有错误以及已清除的错误-无法删除项目。

根据您的用例，您可以执行以下操作：

errors: action.payload.errors,

或者您可以添加以下内容：

case REMOVE_ERRORS:
  const errors = { ...state.errors };
  action.payload.errors.forEach((error) => {
      delete errors[error];
  });
  return {
    ...state,
    errors
  };

然后在删除错误时触发它。

OnChange方法不会更新状态

1 个答案: