Firebase (mit re-base) "fetch" -Methode

Question

Ich verwende die re-base library, um mit einer Firebase-App zu interagieren; Ich suche nach Daten mit der fetch Methode. Das Beispiel in der Dokumentation verwendet nur console.log und gibt keinen Wert zurück, sodass ich nicht weiß, wie ich auf die abgerufenen Daten zugreifen kann.

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

ich beide return Base.fetch... und nur Base.fetch... verwendet hat versucht, aber:

Zum Beispiel, ich versuche, eine Variable auf das Ergebnis der fetch zu setzen, dass dann in einer stateless render Methode der funktionalen Komponente verwenden funktioniert nicht; {subtitle} ist nur leer. Ich bekomme undefined, wenn ich subtitle loggen.

Hat jemand irgendwelche Ideen, wie man das Ergebnis der fetch Methode mit re-base bekommen?

Answer 1

Schöpfer der Re-Base hier.

Sie binden Ihre Hände, indem Sie eine zustandslose funktionale Komponente erzwingen. Da Sie einen "Nebeneffekt" wie das Abrufen von Daten aus Firebase haben, ist es wahrscheinlich am besten, wenn Sie eine Komponente haben, die das Abrufen durchführt, und dann die Daten, die Sie an Ihre zustandslose Funktionskomponente übergeben müssen. Etwas Ähnliches.

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