流星 - 返回裏面的Tracker.autorun函數不返回任何東西

Question

函數renderNotes()應該返回在單獨文件中映射的數組。我注意到當我返回一些JSX時，沒有任何東西返回到屏幕上。我想我知道原因是因爲它將信息返回給跟蹤器功能。如何在tracker.autorun（）函數內返回renderNotes()函數？

import { Meteor } from "meteor/meteor"; 
import React from "react"; 
import { withRouter, Link } from "react-router-dom"; 
import { Accounts } from "meteor/accounts-base"; 
import { Tracker } from "meteor/tracker"; 

import SubjectRoutes from "./subjectRoutes/subjectRoutes"; 
import { Notes } from "../methods/methods" 
import Menu from "./Menu.js"; 

class Home extends React.Component{ 
    componentWillMount() { 
    if(!Meteor.userId()){ 
     this.props.history.replace("/login") 
    } 
    } 
    logoutUser(e){ 
    e.preventDefault() 
    Accounts.logout(() => { 
     this.props.history.push("/login"); 
    }); 
    } 
    renderNotes(){ 
    Tracker.autorun(function() { 
     Meteor.subscribe('notes'); 
     let notes = Notes.find().fetch(); 
     // return notes.map((note) => { 
     // return <p>{note.imageURL}</p> 
     // }) 
     return <p>asdas</p> //<--Here 
    }); 
    } 
    render(){ 
    return (
     <div> 
     <button onClick={this.logoutUser.bind(this)}>Logout</button> 
     {this.renderNotes()} 
     <Menu /> 
     </div> 
    ) 
    } 
} 

export default withRouter(Home); 

Answer 1

這爲我工作：

import { Meteor } from "meteor/meteor"; 
import React from "react"; 
import { withRouter, Link } from "react-router-dom"; 
import { Accounts } from "meteor/accounts-base"; 
import { Tracker } from "meteor/tracker"; 

import SubjectRoutes from "./subjectRoutes/subjectRoutes"; 
import { Notes } from "../methods/methods" 
import Menu from "./Menu.js"; 

class Home extends React.Component{ 
    constructor(props){ 
    super(props) 
    this.state = { 
     notes: [] 
    } 
    } 
    componentWillMount() { 
    if(!Meteor.userId()){ 
     this.props.history.replace("/login") 
    } 
    this.tracker = Tracker.autorun(()=>{ 
     Meteor.subscribe('notes'); 
     let notes = Notes.find().fetch(); 
     this.setState({ notes }) 
    }); 
    } 
    componentWillUnmount() { 
    this.tracker.stop(); 
    } 
    logoutUser(e){ 
    e.preventDefault() 
    Accounts.logout(() => { 
     this.props.history.push("/login"); 
    }); 
    } 
    renderNotes(notes){ 
    return notes.map((note) => { 
     return (
     <div key={note._id}> 
      <img src={note.imageURL} /> 
      <p>{note.type}</p> 
     </div> 
    ) 
    }); 
    } 
    render(){ 
    return (
     <div> 
     <button onClick={this.logoutUser.bind(this)}>Logout</button> 
     <Menu /> 
     {this.renderNotes(this.state.notes)} 
     </div> 
    ) 
    } 
} 

export default withRouter(Home); 

Answer 2

不知道這是否是正確的答案，但我喜歡平時做這樣的事情

import TrackerReact from 'meteor/ultimatejs:tracker-react'; 
    import { Notes } from "../methods/methods"; 

    export default class Home extends TrackerReact(React.Component) { 
     constructor(props,) { 
     super(props); 
     this.state = { 
     subscription:{ 
      publishNotes: Meteor.subscribe("publish-Notes") 
     } 
     }; 
     } 
     returnNotes(){ 
     return Notes.find().fetch(); 
     } 

     render(){ 
     ... 

     const stuff = this.returnNotes().map((note)=>{ 
     return <p>{note}</p> 
     }); 

     return (
     .... 
     {stuff} 
     ) 
     } 
    }