在React中按ID查询

时间:2017-09-27 04:18:51

标签: baqend

在ReactJS中试图弄清楚如何从数据库中获取单个对象,我知道它的关键。

import { db } from 'baqend';

  componentWillMount() {
    db.Companies.load('16747fce-f0b1-422b-aa60-220c2dccac58')
      .then((response) => {
        console.log(response);
    });
  }

我收到此错误:

TypeError: Cannot read property 'load' of undefined
EditCompany.componentWillMount
src/containers/EditCompany.js:33
  30 | }
  31 | 
  32 | componentWillMount() {
> 33 |   db.Companies.load('16747fce-f0b1-422b-aa60-220c2dccac58')
  34 |     .then((response) => {
  35 |       console.log(response);
  36 |   });

我试图直接在组件中执行此操作,但项目正在使用React Starter。这就像查看公司详细信息页面。

1 个答案:

答案 0 :(得分:1)

原因是,db尚未连接,您必须等待连接,然后才能请求数据。 有两种方法可以解决这个问题。第一个选项是简单地调用db对象提供的ready函数,如下所示

db.ready().then((db) => {
  db.Companies.load(....
})

我假设你没有使用我们的react-redux-starter,而是一个简单的Create-React-App。对于这种情况,我们刚刚创建了react-baqend-provider,但尚未记录,但您已经可以安装它。

$ yarn install react-baqend-provider

然后使用baqendProvider,它获取数据库连接实例并将其包装在app.js或index.js中的应用程序

import { BaqendProvider } from 'react-baqend-provider'

<BaqendProvider db={db.connect('codetalks17', true)}>
  <YourApp />
</BaqendProvider>

现在,如果您想在其中一个组件中加载数据,只需将您的组件包装在react-baqend-provider提供的Baqend Higher Order Component中。该组件将正确的数据库实例传递给组件属性。

import { baqend } from 'react-baqend-provider'
class EditCompany extends Component {
  componentDidMount() {
    const { db } = this.props
    db.Companies.load(.......
  }
}
export default baqend(EditCompany)

希望这有帮助