meteor - Meteor 1.3 - 在道具更改时未触发渲染

Question

我最近更新到流星 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');

我被困的时间比我愿意承认的要长，我错过了什么？

Answer 1

它与代码无关，与我在迁移到 Meteor 1.3 时不小心将服务器代码放在客户端代码中有关

我不确定为什么这不会导致任何错误。

Answer 2

您的renderTasks方法不知道是什么this，因为 React 类不进行自动绑定。将您的组件修改为：

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);
  }

  // ...
}

Answer 3

它缺少 React 的参考：

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

至

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