如何将对象从容器传递给Meteor和React中的类？

Question

我想在javascript对象中获得一个值，但它以某种方式失败。我设法通过findOne方法从mongoDB获取预期数据。这是我的代码和控制台日志。

const title = Questions.findOne({_id: props.match.params.id}); 
console.log(title); 

然后控制台说：

对象{_id： “bpMgRnZxh5L4rQjP9”，文： “你喜欢苹果吗？”}

我想要得到什么只在对象中的文本。我已经尝试过这些。

console.log(title.text); 
console.log(title[text]); 
console.log(title["text"]); 
console.log(title[0].text); 

但我无法访问它...错误消息如下。

遗漏的类型错误：无法读取的不确定

这听起来超级简单财产“文”，但我不能由我自己解决。任何人都可以帮我吗？

其他上下文 我正在使用Meteor和React。我想将对象内部的文本从容器传递给类。我想渲染render（）中的文本。但它不接收来自容器的任何数据...容器中的console.log运行良好并显示该对象。

import React, { Component } from 'react'; 
import { createContainer } from 'meteor/react-meteor-data'; 
import { Questions } from '../../api/questions.js'; 
import PropTypes from 'prop-types'; 
import { Answers } from '../../api/answers.js'; 
import ReactDOM from 'react-dom'; 
import { Chart } from 'react-google-charts'; 

class MapClass extends React.Component{ 
    handleAlternate(event){ 
    event.preventDefault(); 
    const country = ReactDOM.findDOMNode(this.refs.textInput).value.trim(); 

    Answers.insert({ 
     country, 
     yes: false, 
     question_id:this.props.match._id, 
     createdAt: new Date(), // current time 
    }); 
    ReactDOM.findDOMNode(this.refs.textInput).value = ''; 
    } 
    handleSubmit(event) { 
    event.preventDefault(); 
    const country = ReactDOM.findDOMNode(this.refs.textInput).value.trim(); 

    Answers.insert({ 
     country, 
     yes: true, 
     question_id: this.props.match.params.id, 
     createdAt: new Date(), // current time 
    }); 
    ReactDOM.findDOMNode(this.refs.textInput).value = ''; 
    } 

    constructor(props) { 
    super(props); 
    this.state = { 
     options: { 
     title: 'Age vs. Weight comparison', 
     }, 
     data: [ 
     ['Country', 'Popularity'], 
     ['South America', 12], 
     ['Canada', 5.5], 
     ['France', 14], 
     ['Russia', 5], 
     ['Australia', 3.5], 
     ], 
    }; 
    this.state.data.push(['China', 40]); 
    } 

    render() { 
    return (
     <div> 

     <h1>{this.props.title.text}</h1> 

     <Chart 
      chartType="GeoChart" 
      data={this.state.data} 
      options={this.state.options} 
      graph_id="ScatterChart" 
      width="900px" 
      height="400px" 
      legend_toggle 
     /> 
     <form className="new-task" onSubmit={this.handleSubmit.bind(this)} > 
      <input 
      type="text" 
      ref="textInput" 
      placeholder="Type to add new tasks" 
      /> 
      <button type="submit">Yes</button> 
      <button onClick={this.handleAlternate.bind(this)}>No</button> 
     </form> 
     </div> 
    ); 
    } 
} 

export default MapContainer = createContainer(props => { 
    console.log(Questions.findOne({_id: props.match.params.id})); 
    return { 
    title: Questions.findOne({_id: props.match.params.id}) 
    }; 
}, MapClass); 

Answer 1

这里的问题是，在安装容器时，数据尚不可用。由于我没有在容器中看到任何订阅，因此我认为您在其他地方处理了这些内容，因此无法知道数据何时准备就绪。你有2个选项。

1）将订阅移入容器并使用订阅句柄ready()函数来评估数据是否准备就绪。显示一个微调或其他东西，但它不是。阅读this。

2）使用lodash/get函数（docs）来处理空的道具。您将需要

npm install --save lodash

然后

import get from 'lodash/get';

，然后在你的类渲染方法：

render() { 
    const text = get(this.props, 'title.text', 'you-can-even-define-a-default-value-here'); 
    // then use `text` in your h1. 
    return (...); 
} 

这是否对你的工作？