2017-03-25 20 views
3

私はFlowを活用しようとしていて、私の反応コンポーネントでうまく動作するようにしています。しかし、私は取得しています:プロパティがクラスに見つかりませんでした - フロー&リアクション

クライアント/検索container.jsx:18 18:this.handleSearchSubmit = this.handleSearchSubmit.bind(この); ^^^^^^^^^^^^^^^^^^プロパティhandleSearchSubmit。プロパティは18で見つかりません:クラスSearchContainerは React.Component {^^^^^^^^^^^^^^^ SearchContainer

Iが設定した成分は以下のようになる延び:

// @flow 

import React, { PropTypes } from 'react'; 
import SearchForm from './search-form'; 

type Props = { 
    onSearchUpdate: Function, 
} 


class SearchContainer extends React.Component { 
    props: Props; 


    constructor(props: Props) { 
    super(props); 
    this.handleSearchSubmit = this.handleSearchSubmit.bind(this); 
    } 

    handleSearchSubmit(searchTerm: {address: string, lat: number, lng: number}): void { 
    this.props.onSearchUpdate(searchTerm); 
    } 

    render() { 
    return (
     <div className="searchBox"> 
     <SearchForm onSearchSubmit={this.handleSearchSubmit} /> 
     </div> 
    ); 
    } 
} 

// SearchContainer.propTypes = { 
// onSearchUpdate: PropTypes.func, 
// }; 

export default SearchContainer; 

これまで、私はクラスの一番下にあるpropTypeを使っていました。質問:

  1. 私のクラスの設定は正しいですか?
  2. はなぜプロパティhandleSearchSubmitが見つかり、私のクラス名SearchContainer

答えて

0

フローの名前で、あまりにも同じ読み取り専用としてクラスのメソッドを扱いますされていないことを訴えて流れています。したがって、ライン

this.handleSearchSubmit = this.handleSearchSubmit.bind(this); 

は、フローエラーを引き起こします。関連するgithubの問題は次のとおりです。https://github.com/facebook/flow/issues/1517

これに対処するには、いくつかの回避策があります。

constructor(props: Props) { 
    super(props); 

    const self: Object = this 
    self.handleSearchSubmit = this.handleSearchSubmit.bind(this) 
} 
+0

流れの問題へのリンクのための滑らかな感謝。 – green1919

1

こんにちは、私はその@TLaddの答えのように感じるが、流れがhandleSearchSubmitの種類を求めているので、これはちょうど私が何をするのかハックであり、それはそれを

を見つけることができません:私は、一般的に、それをこのように扱います
// @flow 

import React, { PropTypes } from 'react'; 
import SearchForm from './search-form'; 

type Props = { 
    onSearchUpdate: Function, 
} 


class SearchContainer extends React.Component { 
    props: Props; 
    // ->>> 
    handleSearchSubmit: <your type>; 
    // <--- 
    constructor(props: Props) { 
    super(props); 
    this.handleSearchSubmit = this.handleSearchSubmit.bind(this); 
    } 

    handleSearchSubmit(searchTerm: {address: string, lat: number, lng: number}): void { 
    this.props.onSearchUpdate(searchTerm); 
    } 

    render() { 
    return (
     <div className="searchBox"> 
     <SearchForm onSearchSubmit={this.handleSearchSubmit} /> 
     </div> 
    ); 
    } 
} 

// SearchContainer.propTypes = { 
// onSearchUpdate: PropTypes.func, 
// }; 

export default SearchContainer; 
関連する問題