Javascript 如何帮助流处理react组件状态初始化器？

我的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将

状态

对象的

flash

属性的初始化视为类型声明，并在随后的

setState（）

中将

flash

属性值的新声明标记为类型不匹配（“字符串与null不兼容”）

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

---

（*）注意：我原来在这行中错误地使用了一个

：

，而不是

=

@丹普林斯纠正了这一点。

你是不是想用这个来代替

就我所知，用

：

指定类属性不是也从来不是有效的语法。在本例中，我想说的是，流的预期行为是将其视为类型声明

如果您想创建一个类属性并给它一个类型签名，您需要将这两种语法组合起来

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

或在一般情况下：

class {
  property:Type = Value;
}

你是不是想用这个来代替

就我所知，用

：

指定类属性不是也从来不是有效的语法。在本例中，我想说的是，流的预期行为是将其视为类型声明

如果您想创建一个类属性并给它一个类型签名，您需要将这两种语法组合起来

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

或在一般情况下：

class {
  property:Type = Value;
}

可以使用道具类型和状态类型参数化

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"
                }
        })
    }
}

type LoginProps={
//这里的道具
}
类型LoginState={
闪光：{
消息：？字符串，
样式：？字符串
}
}
导出默认类LoginForm扩展组件{
状态：LoginState={flash:{message:null，style:null}}
淋浴错误（错误消息：字符串）{
这是我的国家({
闪光：{
消息：错误消息，
风格：“危险”
}
})
}
}

这将有助于流正确协调所有类型。

可以使用prop类型和state类型参数化

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"
                }
        })
    }
}

type LoginProps={
//这里的道具
}
类型LoginState={
闪光：{
消息：？字符串，
样式：？字符串
}
}
导出默认类LoginForm扩展组件{
状态：LoginState={flash:{message:null，style:null}}
淋浴错误（错误消息：字符串）{
这是我的国家({
闪光：{
消息：错误消息，
风格：“危险”
}
})
}
}

---

这将有助于正确协调所有类型。

这正是我的意思（

=

而不是

：

）。但奇怪的是，这并没有解决问题。无论哪种方式，流都会抱怨字符串和null之间的不匹配！想想看，我一点也不清楚为什么flow会建立连接：我不知道它怎么知道

setState（）

的参数是在

状态=…

中设置的同一个对象，这正是我的意思（

=

不是

：

）。但奇怪的是，这并没有解决问题。无论哪种方式，流都会抱怨字符串和null之间的不匹配！仔细想想，我一点也不清楚为什么flow会建立连接：我不知道它怎么知道

setState（）

的参数是在

状态=…

中设置的同一个对象！我不知道

getInitialState

。你怎么看，它似乎建议不要在ES6类中使用getInitialState？我通常不在React中使用ES6类，所以我不知道

getInitialState（）

是否有任何缺陷。但这绝对是有道理的。太迷人了！我不知道

getInitialState

。你怎么看，它似乎建议不要在ES6类中使用getInitialState？我通常不在React中使用ES6类，所以我不知道

getInitialState（）

是否有任何缺陷。但这绝对是有道理的。