如何使用容器中的Meteor文档对象来响应组件? [英] How to use a Meteor document object from container to react component?

问题描述

我只想将对象文档从容器"传递到我的组件并使用它.容器的代码是这样的:

I just want to pass an object document from the Container to my component and use it. The code of container is this:

import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';
import { Projects } from '/imports/api/projects.js';
import ProjectFormUpdate from './ProjectFormUpdate.jsx';

export default ProjectFormUpdateContainer = withTracker(({ key1 }) => {
 Tracker.autorun(() => {
    const sub = Meteor.subscribe('projects');
    if (sub.ready()){
      const oneProject = Projects.findOne(key1);
      console.log(oneProject.nombre);

    }})  
      return {
        oneProject,
      };

})(ProjectFormUpdate);

我以这种方式在我的演示文稿组件中使用它:

And i use it in my presentational component on this way:

render() {
    const { oneProject, isLoading } = this.props;
    if (!isLoading)
    return (
      <div className="col-xs-11">
       <div className="box box-solid">
         <form className="form" onSubmit={this.handleSubmit.bind(this)} >
         <div className="box-body">
                  <div className="row">
                          <div className="col-xs-2">
                              <input
                                className = "form-control input-sm"
                                type="text"
                                ref="codigoInput"
                                placeholder="Código del Proyecto"
                                //THE PROBLEM HERE!!!!!
                                value = {this.props.oneProject.nombre}
                                onChange = {this.handleUpdate.bind(this)}
                              />
                          </div>
...

但是我得到这个错误: TypeError:无法读取未定义的属性"nombre" 问题是行:

But i get this error: TypeError: Cannot read property 'nombre' of undefined The problem is line:

//THE PROBLEM HERE!!!!!
value = {this.props.oneProject.nombre}

推荐答案

加载完成后，此方法就可以正常工作.您需要从容器组件返回isLoading.

This will work fine once things have loaded. You need to return isLoading from the container component.

我还建议单独使用oneProject，因为无论如何您都将其放在渲染的顶部:

I would also recommend using oneProject by itself since you get it at the top of render in any case:

const { oneProject, isLoading } = this.props;

const { oneProject, isLoading } = this.props;

这篇关于如何使用容器中的Meteor文档对象来响应组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！