在 React 中通过 id 查询

Question

试图找出如何从数据库中抓取单个对象，我知道它的关键，在 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。这就像查看公司详细信息页面。

Answer 1

这是因为数据库还没有连接，你必须等待连接，然后才能请求数据。有两种方法可以解决这个问题。第一个选项是像这样简单地调用 db 对象提供的就绪函数

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 高阶组件中。该组件将正确的数据库实例传递给您的组件属性。

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

希望对您有所帮助

在 React 中通过 id 查询

Query by id in React

reactjs

baqend