如何帮助流程处理反应组件状态初始化程序？

Question

我的 React 组件中正在进行这种初始化：

export default class LoginForm extends Component {
    state = {      // (*)
        flash: {
            message: null,
            style: null
        } // initialiser for flash message: show nothing
    }
    showError(error_message: string) {
        this.setState({
                flash: {
                    message: error_message,
                    style: "danger"
                })
        }

不幸的是，flow 将 state 对象的 flash 属性的初始化视为类型声明，并在随后的 setState() 中将 flash 属性值的新声明标记为类型不匹配（“字符串与 null 不兼容”）。

我怎样才能告诉 flow 这里实际发生了什么，从而避免它报告错误？

---

(*) 注意：我最初在这一行中错误地使用了 : 而不是 = ...@DanPrince 更正了这一点。

Answer 1

您的意思是改用class properties syntax 吗？

export default class LoginForm extends Component {
  state = {
    flash: { message: null, style: null }
  }
}

据我所知，使用: 指定类属性不是而且从来都不是有效的语法。在这种情况下，我会说 Flow 将其视为类型声明是预期的行为。

如果你想创建一个类属性并给它一个类型签名，你需要结合这两种语法。

class LoginForm extends Component {
  state
    : { flash: { message: ?string, style: ?Object } }
    = { flash: { message: null, style: null } };
}

或者在一般情况下：

class {
  property:Type = Value;
}

Answer 2

type for React.Component 可以使用道具类型和状态类型进行参数化。

type LoginProps = {
    // props here
}
type LoginState = {
    flash: {
        message: ?string,
        style: ?string
    }
}

export default class LoginForm extends Component<LoginProps, LoginProps, LoginState> {
    state : LoginState = { flash: { message: null, style: null } }
    showError(error_message: string) {
        this.setState({
                flash: {
                    message: error_message,
                    style: "danger"
                }
        })
    }
}

这应该有助于 Flow 正确协调所有类型。