flow - 无法使用 'Home' 扩展 'Component'，因为对象文字 [2] 与 属性 状态下的未定义 [3] 不兼容

Question

我正在尝试将 Flow 与 React 结合使用，我遵循了一些教程但无法解决此错误，我的代码如下所示：

import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";

import { login } from "../../services/auth";
import api from "../../services/api";
import { getToken } from "../../services/auth";

import type { RouterHistory } from "react-router-dom";

type State = {
    username: number,
    password: string,
    history: RouterHistory,
}

class Home extends Component < State > {
    handleChange = this.handleChange.bind(this);
    handleSignIn = this.handleSignIn.bind(this);

    state = {
        username: '',
        password: '',
        history: '',
    };

错误出现在组件内的状态中。

编辑 1： 添加：

...
type Props = {/ * ... * /};
...
class Home extends Component <Props, State>

成功了！但是你想知道为什么吗？

Answer 1

在React flow definitions中，组件的泛型类型参数是先Props再state。因此，正如您所注意到的，首先提供 Props 类型然后提供状态是您想要做的。