反応コンポーネントのフローエラー

Question

私は反応を持つ新しいアプリケーションを開始しましたが、今回はフローを使用しています。

報告されているエラーにいくつか問題がありますが、これはエラーではないと思います。ここで問題と私のクラスである：

https://pastebin.com/x7AHi8ZB

'use strict'; 
// @flow 

import {HashRouter, Route, Switch} from 'react-router-dom'; 
import React from 'react'; 
import {connect} from 'react-redux'; 
import axios from 'axios'; 
import Loader from './loader/Loader'; 
import Sidebar from './sidebar/Sidebar'; 
import Header from './header/Header'; 
import * as appActions from '../actions/appActions'; 



    type Props = { 
    dispatch: Function, 
    loadingTxt: string, 
    errorTxt: string, 
    loading: bool, 
    error: bool 
    }; 


/** 
* App Component. 
*/ 
class App extends React.Component<Props> { 
    constructor(props: Props) { 
    super(props: Props); 

    this.data = {}; 
    } 

    componentDidMount() { 
    axios.get(window.location.protocol + '//' + window.location.host + '/data/app.json') 
     .then((response: object) => { 
     this.data = response.data 
     setTimeout(() => this.props.dispatch(appActions.appHasLoaded(): Function), 2000); 

     }).catch(() => { 
     this.props.dispatch(appActions.appHasErrored(): Function); 
     }); 
    } 

    render(): React.Element { 
    if (this.props.error || this.props.loading) { 
     return (
     <div className={this.props.error ? 'app-loader is--error' : 'app-loader'}> 
      <Loader size="app" /> 
      <p className="app-loader__text">{this.props.error ? this.props.errorTxt : this.props.loadingTxt}</p> 
     </div> 
    ) 

    } else { 
     return (
     <div className="app-inner"> 
      <HashRouter> 
      <Route> 
       <Header {...this.data.header} /> 
      </Route> 
      </HashRouter> 

      <div className="page"> 
      <HashRouter> 
       <Switch> 
       <Route path='/'> 
        <Sidebar {...this.data.sidebar} /> 
       </Route> 
       <Route> 
        <p>Not Found</p> 
       </Route> 
       </Switch> 
      </HashRouter> 
      </div> 
     </div> 
    ) 
    } 
    } 
}; 

const mapStateToProps = (state: object) => { 
    return { 
    loading: state.app.loading, 
    error: state.app.error 
    } 
} 

export default connect(mapStateToProps)(App); 

そして、これらのエラーです：それは報告している理由を私は理解していない何

---

>'dispatch' is missing in props validation  
    src/js/components/App.js:37:37 
      setTimeout(() => this.props.dispatch(appActions.appHasLoaded(): Function), 2000); 'error' is missing in props validation  
    src/js/components/App.js:44:20 
     if (this.props.error || this.props.loading) { 
         'loading' is missing in props validation  
    src/js/components/App.js:44:40 
     if (this.props.error || this.props.loading) { 
            'errorTxt' is missing in props validation  
    src/js/components/App.js:48:74 
      <p className="app-loader__text">{this.props.error ? this.props.errorTxt : this.props.loadingTxt}</p> 'loadingTxt' is missing in props validation src/js/components/App.js:48:96 
      <p className="app-loader__text">{this.props.error ? this.props.errorTxt : this.props.loadingTxt}</p> 

---

ですそれらをエラーとして、私の小道具を定義しました。私はレンダリングメソッドで小道具を使うたびに型ヒントを使うことを勧めましたか？コードを実際に読みにくいようにするだろう！ から反応する

Answer 1

あなたはフロードキュメントHEREに行く場合は、私たちは、インポートすること

を読むことができますが、インポート*とここに名前空間として反応輸入でデフォルトから反応する「反応」の代わりに「反応' インポートするESモジュールとして反応する場合、いずれのスタイルも使用できますが、 名前空間としてインポートすると、Reactのユーティリティタイプにアクセスできます。

それはあなたがimport * as React from 'react'（ないimport React from 'react'）のように反応させ、インポートした場合、ジェネリック医薬品とのあなたのソリューションが動作することを意味します。 あなたが反応するため、現在のインポート文を保存しておきたい場合は、あなたのクラスの先頭にprops: Propsを追加し、このようなクラスの宣言からジェネリックPropsを削除します。それを固定

class App extends React.Component { 
    props: Props 
    // rest of the code