Flow 中的属性缺失或未定义

Posted 2023-03-08

【中文标题】Flow 中的属性缺失或未定义

【英文标题】：Property is missing in null or undefined in Flow

【发布时间】：2019-09-23 03:36:47

【问题描述】：

我将 Flow 与 React 一起使用，并且我有一个使用 State 和 Props 类型的类，如下所示：

type B = x:number

type State = 
  a: ?B
;

type Props = 

class MyClass extends React.PureComponent<Props, State> 
  constructor(props: Props) 
    super(props);
    this.state = 
      a: null,
    ;
  
...
myFunction=()=>

console.log(this.state.a.x)// Flow error here

流错误是：无法获取this.state.a.x，因为未定义中缺少属性x。我的类型定义有什么问题？为什么我应该在构造函数中使用“道具”类型定义（道具：道具）？

【参考方案1】：

?B 表示a 属性与B | null | void 相同。因为你可以做null.x 或undefined.x Flow 抛出一个有效的异常。例如，为了让您的代码正常工作，您可以更改

console.log(this.state.a.x);

成为

console.log(this.state.a ? this.state.a.x : null);

这样如果a 没有设置为B 值，它将记录null。

或者，您可以将类型设为 a: B，但您需要有一个 B 值才能将状态作为初始值，听起来您可能没有，因为您的示例状态设置a: null。

【讨论】：

Flow需要改代码吗？因为this.state.a要在console.log之前初始化。所以它永远不会在这个函数中变为 null。

Flow 无法知道这一点。使用 Flow 时，您可以自行设计数据类型，让 Flow 能够静态分析事物的类型。您已将类型声明为 ?B，因此 Flow 正在按照您的指示进行操作。