时间戳

首页 > 解决方案 > 错误：解构变量时已在开关内声明了 Javascript 标识符

javascript - 错误：解构变量时已在开关内声明了 Javascript 标识符

问题描述

我有一个用于 redux reducer 的开关，但在解构作为有效负载的 javascript 对象时遇到了麻烦。

代码文件：

export default (state = initialState, action) => {
  switch (action.type) {
    case CHANGE_LOGIN_CREDENTIALS_FIELD:
      let { text, field } = action.payload;

      let newState = { ...state };
      newState.inputs[field].content = text;

      return newState;
    case FOCUS_CREDENTIALS_FIELD:
      let { field } = action.payload;

      let newState = { ...state };
      newState.inputs[field].focused = true;

      return newState;
    default:
      return state;
  }
};

无论如何要解决这个问题而不必使用不同的变量名？

标签： javascriptreactjsredux

解决方案

let变量是块范围的，整个switch主体是一个块。

您可以将解构分配行移至开头：

export default (state = initialState, action) => {
  switch (action.type) {
   let { text, field } = action.payload;
   let newState = { ...state };
   
    case CHANGE_LOGIN_CREDENTIALS_FIELD:
      newState.inputs[field].content = text;

      return newState;
    case CHANGE_LOGIN_CREDENTIALS_FIELD:
      newState.inputs[field].focused = true;

      return newState;
    default:
      return state;
  }
};

如果您对其中的每一个都有（大致）相同的逻辑，则此方法有效。而在这种情况下，你会这样做——你总是想要fieldfromaction.payload并且有时需要text。因此，如果您两者都服用，您可以酌情使用其中一种或两种。另外，newStateis always{ ...state }和作为一个let变量，你也需要避免重新声明它。

另一种选择是将每个case放入一个块中：

export default (state = initialState, action) => {
  switch (action.type) {
    case CHANGE_LOGIN_CREDENTIALS_FIELD: {
      let { text, field } = action.payload;

      let newState = { ...state };
      newState.inputs[field].content = text;

      return newState;
    }
    case FOCUS_CREDENTIALS_FIELD: {
      let { field } = action.payload;

      let newState = { ...state };
      newState.inputs[field].focused = true;

      return newState;
    }
    default:
      return state;
  }
};

这使每个块都case成为一个独立的块，因此您可以避免let它们之间的变量冲突。

推荐阅读