State null in component

Question

I'm having an issue with creating a component using react and martyjs. I'm sure it is a typo or something but I just can't seem to find it. Although I have a state mixin in the component the state is not being populated and it doesn't look like getState is even being called in the mixin.

Mixin.es6

var StateMixin = Marty.createStateMixin({
  listenTo: VideoStore,
  getState: function() {
    return {
      items: VideoStore.list(),
      currentItem: VideoStore.select(),
    }
  }
});

State.es6

var VideoStore = Marty.createStore({
  displayName: "Store",
  handlers: {
    list: Events.List,
    render: Events.Render
  },
  getInitialState: function(){
    return {  };
  },
  list: function(){
    return this.fetch({
      id: 'list',
      locally: function(){
        if(this.hasAlreadyFetched('list') )
          return this.state.items;
      },
      remotely: function(){
        return  DissolveStateSource.list();
      }
    });
  },
  select: function(){},
  render: function(){}
});

Component.es6

$( ()=>
React.render(
  <VideosTable/>,
  $("#container")[0]
));

var VideosTable = React.createClass(
{
  mixins: StateMixin,
  render: function() {
    var body = this.state.list.when({  //state is null here
      pending: function(){
        return <span className="ball"></span>;
      },
      failed: function(error){
        return <div className="error">error.message</div>;
      },
      done: function(videos){
        return <div>Videos</div>;
      }
    });

    return <h2>hello</h2>;
  }
});

Any idea what I'm doing wrong?

Edit: I've added a js bin thing here

http://jsbin.com/lekegicumo/2/edit?html,js,console,output

jdlm · Answer 1 · 2015-02-09T15:15:28.030

1

Looks like a typo in Mixin.es6 to me.

Change getState to getInitialState.

Also, in Component.es6:

Change mixins: StateMixin to mixins: [StateMixin].

edited Feb 09 '15 at 15:15

answered Feb 09 '15 at 07:12

jdlm

6,327
5
29
49

I tried that but getInitialState is not being called either. Nothing in the mixin seems to be getting called. – stimms Feb 09 '15 at 14:25
@stimms Found another culprit. Check my edited answer. – jdlm Feb 09 '15 at 15:16
tried that too. I actually looked at the marty code and it allows for either an array or a single mixin there. I've added a live version here http://jsbin.com/lekegicumo/2/edit?html,js,console,output so others can see what I'm doing – stimms Feb 09 '15 at 16:20

score 0 · Accepted Answer · answered Feb 20 '15 at 15:31

0

The problem ended up being that the order of inclusion of JavaScript files was incorrect. Swapping some around fixed the issue.

answered Feb 20 '15 at 15:31

stimms

42,945
30
96
149

score 0 · Answer 3 · answered Jan 31 '16 at 04:15

0

are u using react v0.1.13.0

this is new way to initial your state using 'construct'

constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }

https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html

answered Jan 31 '16 at 04:15

yussan

2,277
1
20
24

State null in component

3 Answers3