Yomguithereal/baobab-react

this.state is null

222xiaohuan opened this issue · 0 comments

Hi,

I wrote the demo according to the docs, but for some reason, it keeps give the error, this.state is always null. here are my codes:

( index.android.js )
import React, { Component } from 'react';
import {root,branch} from 'baobab-react/mixins';
import Pokedex from './components/Pokedex';
var tree = require('./stateTree.js');

import {
AppRegistry,
Navigator
} from 'react-native';

var PokeApp = React.createClass({
mixins:[branch],

render:function(){
return (
<Navigator
initialRoute={{component:Pokedex}}
configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromRight}
renderScene = {(route,Navigator) => {
console.log(route.component);
return <route.component navigator={Navigator} {...route} {...route.passProps} />
}}
/>
);
}
});

var PokeAppWrapper = React.createClass({
mixins: [root],

render: function() {
return ;
}
});

var PokeAppWrapperWrapper = React.createClass({
render: function() {
return ;
}
});

AppRegistry.registerComponent('PokeApp', () => PokeAppWrapperWrapper);

( Pokedex.js )
import React, { Component } from 'react';
import {root,branch} from 'baobab-react/mixins';

import {
View,
Text,
} from 'react-native';

export default class Pokedex extends Component{
mixins: [branch]

cursors: {
pokemons: ['pokedex', 'pokemons'],
pokemonQuery: ['pokedex', 'pokemonQuery'],
isLoading: ['pokedex', 'isLoading']
}

render(){
console.log("this.props--", this.props);
console.log("this.state--", this.state);
console.log("this.context--", this.context);
return (

Loading done {this.state.isLoading}} // here this.state is null

);
}
}

( stateTree.js )
'use strict';

var Baobab = require('baobab');

var tree = new Baobab({
main: {
colorBar: 'red'
},
pokedex: {
pokemons: [],
isLoading: true,
pokemonQuery: ''
},
pokemonInfo: {
info: {},
isLoading: true,
sprite: '',
selectedIndex: 0,
description: ''
}
}, {
autoCommit: true,
asynchronous: true
});

module.exports = tree;

( package.json )
"dependencies": {
"baobab": "^2.3.3",
"baobab-react": "^2.1.1",
"react": "^15.1.0",
"react-native": "^0.27.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-1": "^6.5.0"
}

Any help will be appreciate , thanks very much!