如何在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);

但是我無法訪問它。錯誤消息如下。

未捕獲的TypeError：無法讀取未定義的屬性“文本”

聽起來超級簡單，但我無法自行解決。 有人可以幫我嗎？

我正在使用流星和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()函數評估數據是否准備就緒。 顯示微調框或其他內容。 閱讀此 。

2）使用lodash / get函數（ docs ）處理空道具。 您需要

npm install --save lodash

接着

import get from 'lodash/get';

然后在您的類的render方法中：

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

這對您有用嗎？