首页 文章

使用react无法在流星中显示来自Mongo的数据

提问于
浏览 次
4

任何人都可以帮我解决这个问题，我正在运行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]
javascript mongodb meteor reactjs

2 回答

  • 3

    正如koolaang所说，模板可能会在加载 Gifts 集合之前第一次呈现 . 然而，真正的问题是's not reactively re-rendered when the collection is loaded. This is because you haven'将 Main 组件包裹在 TrackerReact 中 . 所以你需要像这样解决它：

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

    现在，一旦集合加载，就应该重新渲染组件 . 如果要实现加载状态，可以检查订阅准备情况，但不是必需的 .

    回复于
  • 1

    这是因为从后端到前端的数据需要时间 . 如果您正在使用发布/订阅，则应使用handle.ready来等待数据到达前端 .

    回复于

相关问题