javascript - 无法使用 react 在 meteor 中显示来自Mongo的数据

Question

谁能帮我解决这个问题，我在 Meteor 上运行 React，我有这个组件可以使用 TrackerReact 向 Mongo 添加一些数据，但我无法在另一个组件中显示它们，在另一个组件中填充这些数据，我是页面加载后 abale 到 console.log 数据，因此我认为页面加载可能在 Mongo 数据加载之前，任何建议请帮助，谢谢:

这是我在 mongo 上保存的 Adminadd.jsx:

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 集合加载之前第一次渲染。然而，真正的问题是它不会在加载集合时 react 性地重新呈现。这是因为您还没有将 Main 组件包装在 TrackerReact 中。所以你需要像这样修复它:

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

现在组件应该在集合加载后重新渲染。如果您想实现加载状态，您可以检查订阅准备情况，但这不是必需的。