Meteorからコレクションへのコンポーネントのエクスポート

Question

このメテオコードは、ブラウザのmongoコレクションCarsColからのデータを表示できません。
何が間違っていますか？おかげ

// /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

非常に身近な問題。このように、コンポーネントに小道具を経由しての代わりにフェッチされたデータのコレクションへの参照を渡すようにしてください：

// /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')); 

私はそれが動作するはずと信じて、私はあなたがコードの100％を共有していなかったという強い気持ちを持っていますが、関与する。しかし、うまくいけば、サブスクリプションが準備ができたら、それから取り出されたデータではなくコレクション自体を渡し、小道具を介して渡し、コンポーネント自体の内部でフェッチを実行してください。このようにして、反応性も保持します。コレクションが更新されると、コンポーネントが更新（レンダリング）されます。