Question

我使用re-base library与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

重新创建的创建者。

您通过强制无状态功能组件来阻止您的双手。因为你有副作用＆＃34;比如从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）＆＃34; fetch＆＃34;方法

1 个答案: