调用 `this.setState()` 中断了对 componentWillReceiveProps 中 prop 的流程类型检查

Question

当我在它之前调用 this.setState() 时，我在一个我知道是字符串的道具上遇到了流程错误。如果我将 setState() 调用移到使用 prop 的行之后，错误就会消失。我得到的错误是：

null

This type is incompatible with the expected param type of string

undefined

This type is incompatible with the expected param type of string

这两个错误都发生在同一行代码上。

这是该组件的精简版。查看 componentWillReceiveProps:

的实现

import React, { Component } from "react";
import apiRequest from "../../services/apiRequest";

type PropsT = {
  endpoint: ?string,
};

export default class ApiLoader extends Component {
  props: PropsT

  static defaultProps = { endpoint: null }
  state = { isFetching: true }

  componentWillReceiveProps(nextProps: PropsT) {
    if (!nextProps.endpoint) return;

    this.setState({ isFetching: true });
    this.fetch(nextProps.endpoint);       // FLOW ERROR HERE
  }

  fetch(endpoint: string) {
    apiRequest.get(endpoint)
      .then(() => this.setState({ isFetching: false }));
  }

  render(): React.Element<*> {
    return <div>Whatever.</div>;
  }
}

只需切换 componentWillReceiveProps 中最后两行的顺序即可解决问题：

this.fetch(nextProps.endpoint);      // NO ERROR!
this.setState({ isFetching: true });

这只是 Flow 中的一个错误，还是我遗漏了什么？

Answer 1

这是由于类型优化无效：https://flow.org/en/docs/lang/refinements/#toc-refinement-invalidations

将 endpoint 拉出到它自己的变量中，你应该可以开始了。

调用 `this.setState()` 中断了对 componentWillReceiveProps 中 prop 的流程类型检查

Calling `this.setState()` breaks flow type checking on a prop in componentWillReceiveProps

javascript

setstate

reactjs

flowtype