2017-05-25 33 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元素的「問題」。 – 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

非常感謝。我可能會爲QuestionList放置一個錯誤的路徑,或者QuestionList本身有錯誤。反正它現在有效。再次感謝。 –

相關問題