Firebase(使用重基)"获取"方法

Question

我正在使用该re-base库与Firebase应用互动; 我希望使用该fetch方法获取一些数据.文档中的示例只使用console.log并且不返回值,因此我不知道如何访问正在获取的数据.

例如,我正在尝试将变量设置为结果fetch,然后在无状态功能组件的render方法中使用它:

// 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}只是空的.undefined如果我登录,我会得到subtitle.

有没有人对如何fetch使用该方法的结果有任何想法re-base？

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