2017-05-25 19 views
0

MeteorとReactを使用しているときに、コンテナからコンポーネントにデータを渡すことが完全に止まっています。私はMeteor Reactチュートリアルのコードをコピーして少しカスタマイズしたと思っていましたが、何とかしていません。私がしたいのは、データベース(QuestionModel)からデータを取得し、単にビューで出力することです。ブラウザのエラーメッセージによると、renderQuestions()のthis.props.questionsは定義されていません...しかし、データをコンポーネントに明示的に渡しました。 誰か助けてくれますか?ありがとうございました。Meteor Reactを使用してコンテナからコンポーネントにデータを渡す

import React, { Component, PropTypes } from 'react'; 
import { createContainer } from 'meteor/react-meteor-data'; 
import { Questions as QuestionsModel } from '../../api/questions.js'; 
import { QuestionList } from '../QuestionList.jsx'; 

class Questions extends Component{ 
    renderQuestions(){ 
    let filteredQuestions = this.props.questions; 
    //This doesn't work at all... 
    console.log(this.props.questions); 
    return filteredQuestions.map((question) => (
     <QuestionList key={question._id} question={question} /> 
    )); 
    } 
    render(){ 
    return (
     <div className="questionlist"> 
      <ul>{this.renderQuestions()}</ul> 
     </div> 
    ); 
    } 
} 

Questions.propTypes = { 
    questions: PropTypes.array.isRequired, 
}; 


export default QuestionsContainer = createContainer(() => { 
    //This console.log outputs the data correctly. 
    console.log(QuestionsModel.find({}).fetch()); 
    const questions = QuestionsModel.find({}).fetch(); 
    return { 
    questions, 
    }; 
}, Questions); 
+0

Retunが有効なDOM要素でなければなりません:

は、ここに私のコードです。ここでは、有効なDOM要素ではない 'questions'を返しています。 – Ved

+0

あなたの返信ありがとうございます。公式チュートリアルによると、コンテナは配列のような変数を返すことができます。これは単に目的のコンポーネントにデータを渡すだけではなく、何かをレンダリングすることではありません。 https://www.meteor.com/tutorials/react/collections 奇妙なことに、コンポーネントからデータにアクセスできません。 –

答えて

0

QuestionListコンポーネントのコードは何ですか?

私はちょうどそれを<li key={question._id}>{question.question}</li>に置き換え、それは私のために完全に動作します。

その他:サーバー側に/imports/api/questions.js';をインポートしますか?

import React, { Component, PropTypes } from 'react'; 
import { createContainer } from 'meteor/react-meteor-data'; 
import { Questions as QuestionsModel } from '../api/questions.js'; 
// import { QuestionList } from '../QuestionList.jsx'; 

class Questions extends Component{ 
    renderQuestions(){ 
    let filteredQuestions = this.props.questions; 
    //This doesn't work at all... 
    console.log(this.props.questions); 
    return filteredQuestions.map((question) => (
     <li key={question._id}>{question.question}</li> 
    )); 
    } 
    render(){ 
    return (
     <div className="questionlist"> 
      <ul>{this.renderQuestions()}</ul> 
     </div> 
    ); 
    } 
} 

Questions.propTypes = { 
    questions: PropTypes.array.isRequired, 
}; 


export default QuestionsContainer = createContainer(() => { 
    //This console.log outputs the data correctly. 
    console.log(QuestionsModel.find().fetch()); 
    const questions = QuestionsModel.find({}).fetch(); 
    return { 
    questions, 
    }; 
}, Questions); 
+1

ありがとうございます。質問リストに間違ったパスを入れたり、質問リスト自体にエラーがあります。とにかくそれは今働きます。再度、感謝します。 –

関連する問題