javascript - 流程不检测 if block 处理潜在的未定义(可能)值。为什么？

Question

我在 Flow 中看到了我不理解的行为。我尝试输入的函数是一个 redux reducer 。我看到的问题似乎源于这样一个事实:提供给 reducer 的 action 对象具有标有“maybe”运算符的有效负载:?。该类型本质上如下所示:

type Action = {
  type: 'foo',
  payload?: { ... }
}

在reducer中，我尝试提供一个if-gate来处理未定义payload的情况。从理论上讲，这似乎应该可行。最简单的情况有效(参见 here ):

type Foo = {
  type: 'foo',
  payload?: {
    foo: 'foo'
  }
};

type Bar = {
  type: 'bar',
  payload?: {
    bar: 'bar',
  }
};

const reducer = (state: {} = {}, action: Foo | Bar) => {
  switch (action.type) {
    case 'foo': {
      if (!action.payload) {
        return state;
      }
      return action.payload.foo;
    }
    case 'bar': {
      if (!action.payload) {
        return state;
      }
      return action.payload.bar;
    }
    default:
      return state;
  }
}

但是，在我实际的 reducer 中，它涉及更多一些，我无法消除这些错误。我的 reducer 看起来像这样:

const camelize = (x) => x;
const getSearchTypeFromPath = (x) => x;

type A = {
  type: '@@router/LOCATION_CHANGE',
  payload?: {
    pathname: string,
    query: {},
  }
}

type B = {
  type: 'action.foo',
  payload?: {
    mode: string,
    params: {}
  }
}

const byMode = (
  state: {} = {},
  action: A | B,
) => {
  switch (action.type) {
    case '@@router/LOCATION_CHANGE': {
      if (!action.payload) {
        return state;
      }

      const modeKey: string = camelize(getSearchTypeFromPath(action.payload.pathname));
      return {
        ...state,
        [modeKey]: action.payload.query,
      };
    }
    case 'action.foo': {
      if (!action.payload) {
        return state;
      }

      const modeKey: string = camelize(action.payload.mode);
      return {
        ...state,
        [modeKey]: action.payload.params,
      }
    }
    default:
      return state;
  }
};

与上面的简化情况不同，此代码会产生一些流程错误:请参阅 here :

33:         [modeKey]: action.payload.query,
                                      ^ Cannot get `action.payload.query` because property `query` is missing in undefined [1].
References:
6:   payload?: {               ^ [1]
44:         [modeKey]: action.payload.params,
                                      ^ Cannot get `action.payload.params` because property `params` is missing in undefined [1].
References:
14:   payload?: {                ^ [1]

就处理可能未定义的有效负载的逻辑门而言，我认为它们是相同的。那么为什么会出现错误呢？同样有趣的是，每个 case block 中引用的第一个属性没有错误:即 pathname 和 mode。最后，我注意到的另一件事是，如果我删除辅助函数(在我的示例中刚刚将其转换为虚拟函数)，那么我就不会收到错误。请参阅here .

有没有人可以解释一下这里发生了什么。我现在还不太明白。

Answer 1

问题是对 camelize 的调用。

Flow 在函数调用后重置所有类型细化，其中该函数调用可能会改变值。在您的示例中，action 是一个参数，因此发生类似的情况是合理的:

function camelize(x) {
   someAction.payload = undefined;
}

// Now your code crashes
byMode({}, someAction);

通常，解决方案是将被测试的内容提取到 const 中:

const payload = action.payload;
if (payload === undefined) return;
// OK to use 'payload' after function calls now

另请参阅https://flow.org/en/docs/lang/refinements/#toc-refinement-invalidations或例如https://github.com/facebook/flow/issues/5393