2016-07-12 4 views
1

Ich habe einen Container in meiner React Native App und und ich verwende es wie preload, um Szene Loading... anzuzeigen, bevor ich Daten vom Server bekomme. Also Ich versende eine Aktion Benutzerdaten zu holen und danach habe ich meinen Zustand zu aktualisieren versuche ich neue Komponente Navigator zu schieben, aber ich habe einen Fehler bekam:Get Warnung nach dem Aktualisieren der Komponente im Navigator

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`. 

Und ich verstehe nicht, was der beste Weg ist um mein Problem zu beheben.

Also mein Behälter:

import myComponent from '../components' 

class App extends Component { 
    componentDidMount() { 
    this.props.dispatch(fetchUser()); 
    } 

    _navigate(component, type = 'Normal') { 
    this.props.navigator.push({ 
     component, 
     type 
    }) 
    } 

    render() { 
    if (!this.props.isFetching) { 
     this._navigate(myComponent); 
    } 

    return (
     <View style={styles.container}> 
     <Text style={styles.welcome}> 
      Loading... 
     </Text> 
     </View> 
    ); 
    } 
} 
App.propTypes = { 
    dispatch: React.PropTypes.func, 
    isFetching: React.PropTypes.bool, 
    user: React.PropTypes.string 
}; 

export default connect((state) => ({ 
    isFetching: state.data.isFetching, 
    data: state.data.user 
}))(App); 

Mein Minderer:

const data = (state = initialState, action) => { 
    switch (action.type) { 
    case types.USER_FETCH_SUCCEEDED: 
     return { 
     ...state, 
     isFetching: false, 
     user: action.user 
     }; 
    default: 
     return state; 
    } 
}; 

Antwort

1

Sie nichts auslösen, die können setState im Inneren des Körpers Ihrer render Methode. Wenn Sie auf eingehende Requisiten hören müssen, verwenden Sie componentWillReceiveProps

das Entfernen von render():

if (!this.props.isFetching) { 
    this._navigate(myComponent); 
} 

und fügen componentWillReceiveProps(nextProps)

componentWillReceiveProps(nextProps) { 
    if (!nextProps.isFetching) { 
    this._navigate(myComponent); 
    } 
} 
+0

Thank you so much! – rel1x

Verwandte Themen