Question

您需要对空值进行检查以避免流错误的规则是什么？这段代码给我一个错误，使我感到惊讶：

// @flow
import React, { Component } from "react";

type Props = {|
  apples: ?Array<Array<string>>,
  oranges: ?Array<Array<string>>,
|};

class FruitBasket extends Component<Props> {
  render() {
    if (this.props.oranges == null || this.props.apples == null) {
      return null;
    }

    var dummyVariable = 16;

    var apples = this.props.apples.map((ask) => {
      return null;
    })

    var oranges = this.props.oranges.map((bid) => {
      return null;
    })

    return null;
  }
}

export default FruitBasket;

错误是： Cannot call this.props.oranges.map because property map is missing in null or undefined [1].

在var apples = ...声明之后，Flow编译器会“忘记”空检查似乎很愚蠢。

Answer 1

这是一个验证/订购问题。 Flow不知道this.props.apples.map()的作用，因此从技术上讲，它最终可能会设置this.props.oranges = null。由于可能会发生这种情况，因此从this.props.oranges.map()的角度来看，if (this.props.oranges == null)的优化不再有效，this.props.oranges 可以为空类型检查器。您有两种解决方案：

将if (this.props.oranges == null) return null;检查移到this.props.oranges.map()调用之前。不利的一面是，您随后拆分了纾困逻辑，最终无缘无故地映射了apples。

将值分配给临时变量，以便Flow可以告知它们的类型以后不会更改。这是我的建议。

render() {
  if (this.props.oranges == null || this.props.apples == null) {
    return null;
  }
  const { oranges, apples } = this.props;

  var dummyVariable = 16;

  var applesItems = apples.map((ask) => {
    return null;
  })
  var orangesItems = oranges.map((bid) => {
    return null;
  })

  return null;
}

空检查仍会引发流错误

1 个答案: