2017-09-27 2 views
1

ReactJS에서 데이터베이스의 단일 개체를 가져 오는 방법을 알아 내려고합니다.React의 id에 의한 쿼리

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 | }); 

을하지만,이 프로젝트는 초보자 반응 사용하고 있습니다. 이것은 회사 세부 정보보기 페이지와 같습니다.

답변

1

이유는 데이터가 요청되기 전에 db가 아직 연결되어 있지 않고 연결을 기다려야하기 때문입니다. 이 문제를 해결하는 방법은 두 가지가 있습니다. 첫 번째 옵션은 단순히 DB 객체가이

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

처럼 제공하는 준비 기능 당신이 우리의 반응-REDUX-스타터를 사용하지 않는 가정 호출하는 것입니다,하지만 간단한 만들기 - 앱내 반응. 이 경우, 아직 문서화되지 않은 react-baqend-provider를 만들었지 만 이미 설치할 수 있습니다.

$ yarn install react-baqend-provider 

는 그런 다음 DB 연결 인스턴스를 얻는 baqendProvider를 사용하고이 중 하나에 데이터를로드 할 경우 app.js에 또는 지금

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

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

하는 index.js 앱이 주위를 감싸 귀하의 구성 요소는 단순히 귀하의 구성 요소를 react-baqend-provider가 제공하는 Baqend Higher Order Component에 포장합니다. 이 구성 요소는 오른쪽 db 인스턴스를 구성 요소 속성에 전달합니다. 연결이 준비가 내 문제였다하는

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

희망이

+0

대기를하는 데 도움이됩니다. 초보자를 사용하고 있는데 환상적입니다 ...하지만 데이터 모델링을 확인하기 위해 몇 가지 쿼리를 수행하고 싶습니다. 지금 당장이를 피하고 싶습니다. 감사! –

+0

누군가가 이것을 알면 ... react-redux-starter의 패턴을 복사하고 거기에있는 쿼리를 수정하는 것이 더 쉽습니다. 그런 다음 redux logger를 사용하여 자신이 생각하는 것을 얻고 있는지 확인하십시오. –

관련 문제