Question

我最近更新了流星1.3，我遇到了createContainer功能问题。当道具改变时，应用程序应该重新渲染，但是，它没有发生。我正在使用this page中的示例，但没有任何事情发生，应用程序只显示标题。没有错误。

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

tasks.js：

import { Mongo } from 'meteor/mongo';

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

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

Answer 1

您的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 2

它与代码无关，与我在迁移到Meteor 1.3时意外将我的服务器代码放在客户端代码中时所做的一切

我不知道为什么这不会导致任何错误。

Answer 3

缺少React的参考：

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

到

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

流星1.3 - 渲染不会在道具变化时触发

3 个答案: