使用react無法在流星中顯示來自Mongo的數據

Question

任何人都可以幫助我解決這個問題，我正在運行React on Meteor並且我有這個組件使用TrackerReact向Mongo添加一些數據，但我不能在另一個組件中顯示它們在另一個組件中填充這些數據，我是掌握到控制台頁面加載后的.log數據，因此我想可能是Mongo數據加載前的頁面加載，有任何建議請幫忙，謝謝：

這里是Adminadd.jsx，我在mongo上保存：

import React from 'react';
import TrackerReact from 'meteor/ultimatejs:tracker-react'

Gifts= new Mongo.Collection("gifts");

export default class AdminAdd extends TrackerReact(React.Component){
addGift(event){
    event.preventDefault();

    giftName=this.refs.giftname.value.trim();
    giftCity=this.refs.giftcity.value.trim();
    giftActive=this.refs.giftactive.checked;

    Gifts.insert({
        name: giftName,
        city: giftCity,
      active: giftActive,
    });

    this.refs.giftname.value="";
    this.refs.giftcity.value="";
    this.refs.giftactive.checked=false;
}

render(){..RenderStuff..}

這是我想要加載它們的地方：

import React from 'react';
import Gift from './components/Gift.jsx'
export default class Main extends React.Component{
allgifts(){
    return Gifts.find().fetch();
}
render(){
    console.log(allgifts());
    return(
        <div className="row">
        {this.allgifts().map((gift)=>{
            return
                <Gift gift={gift} key={gift._id}/>})}
        </div>
    )}}

和禮品組件：

import React from 'react';
export default class Gift extends React.Component{
render(){
    return(
        <div>
            <div>
                <div>{this.props.gift.name}</div>
                <div>{this.props.gift.city}</div>
                <div>{this.props.gift.active}</div>
            </div>
        </div>
    )}}

這是控制台日志，首先返回空對象，然后當我Gifts.find（）。fetch（）它手動它之后工作：

[]
Gifts.find().fetch()
Object, Object, Object, Object, Object, Object, Object, Object]

Answer 1

正如koolaang所說，模板可能會在加載Gifts集合之前第一次呈現。 然而，真正的問題是，在加載集合時，它不會被動地重新渲染。 這是因為您尚未在TrackerReact包裝Main組件。 所以你需要像這樣解決它：

export default class Main extends TrackerReact(React.Component) { ... }

現在，一旦集合加載，就應該重新渲染組件。 如果要實現加載狀態，可以檢查訂閱准備情況，但這不是必需的。

Answer 2

這是因為從后端到前端的數據需要時間。 如果您使用發布/訂閱，則應使用handle.ready來等待數據到達前端。