Yomguithereal / baobab-react

React integration for Baobab.
MIT License
310 stars 38 forks source link

this.state is null #115

Closed 222xiaohuan closed 8 years ago

222xiaohuan commented 8 years ago

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!