Typescriptとjsx、なぜオブジェクトのライフサイクルでは、静的に宣言された状態はnullですか？

Question

私はReduxのを使用していて、私のコンポーネントは次のように宣言されている1つに、二つの異なるプロジェクトを持っている：

class Foo extends React.component<any, any> { 
    public static state: any = { 
    bar: '' 
    } 
} 

const mapStateToProps = (state) => { 
    return {} 
} 

export default connect(mapStateToProps)(withRouter(Foo)) 

、その後、私は私のコンポーネントは次のように宣言されているReduxの、せずに別のプロジェクトを持っている：

class Foo extends React.Component<any, any> { 
    public static state: any = { 
    bar: '' 
    } 
} 

export default Foo; 

私はreduxプロジェクトで自分の状態を静的に宣言しようとしましたが、実行時にピックアップされません。

EDIT：

私の質問には、明確化のためにいくつかのより多くのコードは十分明らかではないようだ。

class Foo extends React.component<any, any> { 
    public static state: any = { 
    bar: '' 
    } 

    render() { 
    console.log(this.state); // null <- why? 

    return (...); 
    } 

} 

const mapStateToProps = (state) => { 
    return {} 
} 

export default connect(mapStateToProps)(withRouter(Foo)) 

非Reduxのコードに対し：

class Foo extends React.Component<any, any> { 
    public static state: any = { 
    bar: '' 
    } 

    render() { 
    console.log(this.state) // { bar: '' } <- works! why? 

    return (...) 
    } 
} 

export default Foo; 

Answer 1

機能mapStateToProps」はdoesnのコンポーネントの状態を設定すると、アプリケーション状態の一部（reduxストア内）がの小道具にマップされます。あなたのコンポーネント。

あなたのコンポーネントが受け取る小道具は、mapStateToPropsの小道具とあなたが直接渡した小道具の組み合わせです。

ローカルコンポーネントの状態を持つことは意味をなさない場合がありますが、connectコンポーネントを使用する理由の1つは、すべてをグローバル状態に保存する代わりに、ディスパッチアクションによって更新されるsetStateと呼んでください。

---

あなたの質問への更新を参照して、それはあなたのクラスにconnectを呼び出すように見えるが道を壊し、あなたがおそらくコンストラクタであなたの状態を初期化する必要がありますのでstatic作品。

class Foo extends React.component<any, any> { 
    constructor() { 
    this.state = { 
     bar: '' 
    }; 
    } 

    render() { 
    console.log(this.state); // null <- why? 

    return (...); 
    } 

} 

const mapStateToProps = (state) => { 
    return {} 
} 

export default connect(mapStateToProps)(withRouter(Foo))