0

最近 meteor 1.3 にアップデートしましたが、createContainer 関数に問題があります。小道具が変更されたときにアプリが再レンダリングされるはずですが、そうではありません。このページの例で作業していますが、何も起こらず、アプリはヘッダーのみを表示します。エラーはありません。

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>Header</h1>
        </header>

        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
}


App.propTypes = {
  tasks: PropTypes.array.isRequired,
};

export default createContainer(() => {
  return {
    tasks: Tasks.find({}).fetch(),
  };
}, App);

タスク.js:

import { Mongo } from 'meteor/mongo';

export const Tasks = new Mongo.Collection('tasks');

認めたくないほど長く立ち往生しています。何が欠けていますか?

4

3 に答える 3

0

それはコードとは何の関係もなく、Meteor 1.3 に移行する際にサーバー コードを誤ってクライアント コード内に配置したことと関係がありました。

ただし、これでエラーが発生しなかった理由はわかりません。

于 2016-04-14T21:49:46.473 に答える
0

React クラスは自動バインドを行わないため、renderTasksメソッドは何が何であるかわかりません。thisコンポーネントを次のように変更します。

class App extends Component {
  renderTasks() {
    return this.props.tasks.map((task) => (
      <Task key={task._id} task={task} />
    ));
  }

  render() {
    return (
      <div className="container">
        <header>
          <h1>Header</h1>
        </header>

        <ul>
          {this.renderTasks.call(this)}
        </ul>
      </div>
    );
  }
}

または、meteor npm install --save react-autobindこのコンストラクターを挿入して、すべてを自動的にバインドすることもできます。

import autoBind from 'react-autobind';

class App extends Component {
  constructor(props) {
    super(props);
    autoBind(this);
  }

  // ...
}
于 2016-04-14T21:25:22.523 に答える