Meteor Export-Sammlung zu React-Komponente

Question

Dieser Meteor-Code zeigt die Daten aus der Mongo-Sammlung CarsCol im Browser nicht an.
Was mache ich falsch?

Dank

// /imports/api/collections.js 
export const CarsCol = new Mongo.Collection('carsCol'); 


// /imports/ui/myList.jsx 
import React from 'react'; 

export const ListItems = ({listItems}) => { //<---- {listItems} undefined 
    if (listItems && listItems.length > 0) { 
    return (
     <ol> 
     {listItems.map((item) => (
      <li key={item._id}>{item.car}</li> 
     ))} 
     </ol> 
    ); 
    } else { 
    return (
     <p>No cars yet!</p> //<------------ shows in browser 
    ); 
    } 
}; 


// /client/cars.js 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { composeWithTracker } from 'react-komposer'; 
import { ListItems } from '../imports/ui/myList.jsx'; 
import { CarsCol } from '../imports/api/collections.js'; 

const composer = (props, onData) => { 
    const sub = Meteor.subscribe('carsCol'); 
    if (sub.ready()) { 
    const cars = CarsCol.find().fetch(); 
    onData(null, {cars}); 
    } 
}; 

const Container = composeWithTracker(composer) (ListItems); 
ReactDOM.render(<Container />, document.getElementById('react-root')); 

Answer 1

Sehr bekanntes Problem. Versuchen Bezug auf Sammlung zu übergeben statt abgerufenen Daten über Requisiten auf die Komponente, wie folgt aus:

// /imports/api/collections.js 
export const CarsCol = new Mongo.Collection('carsCol'); 


// /imports/ui/myList.jsx 
import React from 'react'; 

export const ListItems = ({cars}) => { 
    const listItems = cars.find().fetch(); // <- fetching data from a collection received as a prop right here 

    if (listItems && listItems.length > 0) { 
    return (
     <ol> 
     {listItems.map((item) => (
      <li key={item._id}>{item.car}</li> 
     ))} 
     </ol> 
    ); 
    } else { 
    return (
     <p>No cars yet!</p> //<------------ shows in browser 
    ); 
    } 
}; 


// /client/cars.js 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { composeWithTracker } from 'react-komposer'; 
import { ListItems } from '../imports/ui/myList.jsx'; 
import { CarsCol } from '../imports/api/collections.js'; 

const composer = (props, onData) => { 
    const sub = Meteor.subscribe('carsCol'); 
    if (sub.ready()) { 
    onData(null, { 
     cars: CarsCol // <- now the "cars" prop is the collection 
    }); 
    } 
}; 

const Container = composeWithTracker(composer) (ListItems); 
ReactDOM.render(<Container />, document.getElementById('react-root')); 

Ich glaube, dass sollte funktionieren, obwohl ich starke Gefühl zu haben bin, dass Sie nicht zu 100% des Codes nicht geteilt beteiligt. Aber hoffentlich ist die Idee klar: wenn das Abonnement bereit ist, übergeben Sie die Sammlung selbst, nicht die Daten, die von ihr abgerufen werden, über Requisiten und führen dann das Holen innerhalb der Komponente selbst durch. Auf diese Weise erhalten Sie auch die Reaktivität, z. Wenn die Sammlung aktualisiert wird, wird die Komponente aktualisiert (gerendert).