我无法将我的 backbone 集合传递给反应组件

Question

我的 backbone 集合在我只是将它作为道具传递给反应组件时不会填充。我尝试首先使用 componentDidmount 和 componentWillMount 获取集合，但仍然没有填充集合。如果我通过设置指向 DecksIndex 的 window 变量来测试代码，并在控制台工具中调用 getInstance() 然后获取，数据加载正常。我的代码如下：

 //router.js
var DeckComponent = require("./views/deck.jsx")
var DecksIndex = React.createFactory(require("./views/decks.jsx"))
var decksCollection = require("./component/collections/decks.js");

module.exports = Backbone.Router.extend({

    initialize: function(){
        this.rootEl = document.getElementById('container');
    },

    routes: {
        "":"index",
        "decks/:id":"deckShow"
    },

    index: function(){

        var decks = new DecksIndex({decks: decksCollection.getInstance()});
        this._swapView(decks)
        console.log("hooray!")
    },

    deckShow: function(id){
        //var deck = Flashcards.Collections.decks.getOrFetch(id);
        var showDeck = new DeckComponent();
        this._swapView(showDeck);
    },

    _swapView: function(view){
        if (this.currentView) {
            React.unmountComponentAtNode(this.rootEl);
        }
        this.currentView = view
        React.render(view, document.getElementById('container'));
    }   

});


//decks.js

var deck = require('../models/deck.js')
var decks = Backbone.Collection.extend({
  url: "/api/decks",
  model: deck,
  getOrFetch: function(id){
        var model = this.get(id);
        var that = this;
        if (model) {
            model.fetch();
        }else{
            model = new deck({id: id})
            model.fetch({
                success: function(){
                    that.add(model)
                }
            })
        }
        return model;
    },

    parse: function (data) {
        debugger;
        return data.objects
    },

});

decks.getInstance = _.memoize(function () {
  return new decks();
});

module.exports = decks;

//decks.jsx
var DecksList = React.createClass({

    render: function() {

            return (
              <div className="deck-list">
              {
                this.props.decks.map(function (deck) {
                    var title = deck.name
                    debugger;
                  return (
                    <div key={deck.id} className="note-summary">
                      {title}
                    </div>
                  );
                })
              }
              </div>
            );
      }
});

module.exports = DecksList;

Answer 1

这是管理状态的容器组件有意义的情况的示例。如果 DecksList 有一个容器，它在安装时检索集合，并且只在数据可用时才呈现 DecksList，那么它可能会解决问题。这是一篇关于该模式的好文章：https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

我无法将我的 backbone 集合传递给反应组件

I am having trouble passing in my backbone collection in to a react component

javascript

backbone.js

reactjs