Meteor-React チュートリアルを実行して、ステップ 3 で行き詰まった Meteor/React 初心者です。私の問題は、データがデータベースに存在するにもかかわらず、ブラウザに表示されないことです。
これが私の imports/ui/App.jsx です:
import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Tasks } from '../api/tasks.js';
import Task from './Task.jsx';
class App extends Component {
renderTasks() {
return this.props.tasks.map((task) => (
<Task key={task._id} task={task} />
));
}
render() {
return (
<div className="container">
<header>
<h1>Todo List</h1>
</header>
<ul>
{this.renderTasks()}
</ul>
</div>
);
}
}
App.propTypes = {
tasks: PropTypes.array.isRequired,
};
export default createContainer(() => {
return {
tasks: Tasks.find({}).fetch(),
};
}, App);
コンソールにエラーは表示されません。
基本的this.props.tasks
に空の配列を返します。しかしdb.tasks.find({})
、コンソールにはレコードが表示されます。あまり変更せずに、Tasks レコードをハードコードすると問題なく表示されるので、問題は Task コンポーネントにはありません。誰でもここで助けることができますか?よろしくお願いします。
クライアント/main.jsx:
import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import App from '../imports/ui/App.jsx';
Meteor.startup(() => {
render(<App />, document.getElementById('render-target'));
});
パッケージ.json:
{
"name": "simple-todos",
"private": true,
"scripts": {
"start": "meteor run"
},
"dependencies": {
"meteor-node-stubs": "~0.2.0",
"react": "^15.1.0",
"react-addons-pure-render-mixin": "^15.1.0",
"react-dom": "^15.1.0"
}
}
npm バージョン3.3.12
ノード バージョン5.6.0