在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。这就像查看公司详细信息页面。
答案 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)
希望这有帮助