Question

我有一小段代码根据路径名从数据库中呈现数据。我唯一的问题是，当我尝试检索该数据时，使用this.state.note._id会返回一个错误，指出它找不到未定义的_id。我如何访问放入状态的对象？它只在我尝试访问对象内部的项目时出错，例如_id

import React from "react";
import { Tracker } from "meteor/tracker";

import { Notes } from "../methods/methods";

export default class fullSize extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      note: [],
      document: (<div></div>)
    };
  }
  componentWillMount() {
    this.tracker = Tracker.autorun(() => {
      Meteor.subscribe('notes');
      let note = Notes.find({_id: this.props.match.params.noteId}).fetch()
      this.setState({ note: note[0] });
    });
  }
  renderDocument(){
    console.log(this.state.note);
    return <p>Hi</p>
  }
  componentWillUnmount() {
    this.tracker.stop();
  }
  render(){
    return <div>{this.renderDocument()}</div>
  }
}

我知道它返回undefined的原因是因为（如果我错了，请纠正我）页面在跟踪器刷新数据之前渲染函数。当跟踪器收到一些它将调用renderDocument函数的数据时，我怎么会得到某种回调？

Answer 1

您正在将note状态初始化为数组，但之后您将其设置为标量。您还没有检查订阅是否准备好，这意味着当它仍然为空时，您最终会尝试获取状态。只要其中的反应数据源发生更改，跟踪器就会运行。这意味着您不需要回调，只需添加要在跟踪器内运行的任何代码。

您也不需要文档内容本身的状态变量，您的渲染函数只需返回<div />，直到订阅准备就绪。

另请注意，.findOne()相当于.find().fetch()[0] - 它会返回单个文档。

当您在_id上搜索时，您可以将查询速记为.findOne(id)而不是.findOne({_id: id})

import React from "react"; import { Tracker } from "meteor/tracker"; import { Notes } from "../methods/methods"; export default class fullSize extends React.Component{ constructor(props){ super(props); this.state = { note: null }; } componentWillMount() { const sub = Meteor.subscribe('notes'); this.tracker = Tracker.autorun(() => { if (sub.ready) this.setState({ note: Notes.findOne(this.props.match.params.noteId) }); }); } renderDocument(){ return this.state.note ? <p>Hi</p> : <div />; } componentWillUnmount() { this.tracker.stop(); } render(){ return <div>{this.renderDocument()}</div> } }

流星 - 如何让跟踪器自动运行回调

1 个答案: