Firebase（使用 re-base）"fetch" 方法

Question

我正在使用 re-base library 与 Firebase 应用进行交互；我正在寻找使用 fetch 方法获取的数据。文档中的示例仅使用 console.log 而没有 return 值，因此我不知道如何访问正在获取的数据。

例如，我试图将一个变量设置为 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} 只是空的。如果我登录 subtitle.

，我会得到 undefined

有没有人知道如何使用 re-base 得到 fetch 方法的结果？

Answer 1

这里是 re-base 的创建者。

强制使用无状态功能组件是在束缚您的手脚。因为你有一个 "side effect" 喜欢从 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} /> 
  }
})

Firebase（使用 re-base）"fetch" 方法

Firebase (using re-base) "fetch" method

firebase

reactjs

es6-promise