Firebase（re-baseを使用） "fetch"メソッド

Question

re-base libraryを使用してFirebaseアプリとやり取りしています。私はfetchメソッドを使ってデータを取得しようとしています。ドキュメントの例ではconsole.logを使用していますが、値を返さないため、フェッチされているデータにアクセスする方法はわかりません。例えば

、私はステートレスな機能性成分のrender方法でいることを使用し、その後、fetchの結果に変数を設定しようとしている：

// app/components/CompanyCard/index.js 
let subtitle = helpers.getCompanyName(props.company); 

return (
    <div className="Card"> 
     <div className="Card-body"> 
     <p className="Card-subtitle">{subtitle}</p> 
     </div> 
    </div> 
); 


// app/config/api.js 
const Base = Rebase.createClass('https://###.firebaseio.com'); 
export let helpers = { 
    getCompanyName: (id) => { 
    return Base.fetch(`/companies/${id}/name`, { 
     context: {}, 
     then: (data) => data 
    }) 
    } 
} 

私はreturn Base.fetch...、ちょうどBase.fetch...が、両方を使用して試してみましたいずれも動作しません。 {subtitle}は空です。私がsubtitleを記録するとundefinedが得られます。

re-baseを使用してfetchメソッドの結果を取得する方法はありますか？

Answer 1

ここに再ベースの作成者。

ステートレス機能コンポーネントを強制して、手をつないでいます。 Firebaseからデータを取り出すような "副作用"があるので、フェッチを処理し、ステートレス機能コンポーネントにデータを渡してレンダリングするためのデータを取得したコンポーネントを持つことが最善の方法です。これに似た何か。

function Card (props) { 
    return (
     <div className="Card"> 
     <div className="Card-body"> 
      <p className="Card-subtitle">{props.subtitle}</p> 
     </div> 
    </div> 
); 
} 

const CompanyCard = React.createClass({ 
    getInitialState() { 
    return { 
     subtitle: '' 
    } 
    }, 
    componentDidMount() { 
    getCompanyName(this.props.company) 
    }, 
    getCompanyName (id) { 
    Base.fetch(`/companies/${id}/name`, { 
     context: this, 
     then: (subtitle) => { 
     this.setState(subtitle) 
     } 
    }) 
    }, 
    render() { 
    <Card subtitle={this.state.subtitle} /> 
    } 
})