时间戳

首页 > 解决方案 > OnChange 方法不会更新状态

javascript - OnChange 方法不会更新状态

问题描述

我有一个不会更新我的 redux 状态的 onChange 方法。如果我在 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 商店中，错误仍然存​​在..

标签： javascriptreactjsreduxreact-redux

解决方案

我认为这只是因为这里：

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

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

推荐阅读