フローハンドルの反応コンポーネントの状態イニシャライザを支援するには？

Question

私はリアクトコンポーネントで起こって初期化のこの種があります

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

は残念ながら、フローは型宣言として、その後のsetState()そのフラグにstateオブジェクトのflashプロパティの初期化を処理しているがflashプロパティの値の型の不一致（ "文字列はnullと互換性がありません"）として新たに宣言されました。

ここで実際に何が起こっているのかをフローに伝えるにはどうすればエラーを報告しないようにすることができますか？

---

（*）注：私はもともと誤って代わりに=のこの行の:が... @DanPrinceはそれを修正しました。

Answer 1

代わりにclass properties syntaxを使用しましたか？

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

限り、私は承知しているとして、:でクラスのプロパティを指定することはなく、これまで有効な構文されていません。この場合、Flowが型宣言として扱うのが期待される動作だと言います。

クラスプロパティとを作成する場合は、型シグネチャを指定するには、2つの構文を組み合わせる必要があります。

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

これは、すべてのタイプを正しく調整するのに役立ちます。