Navigatorでコンポーネントを更新した後に警告を表示

Question

React Nativeアプリにコンテナがあり、サーバーからデータを取得する前にプリロードのように使用してシーンLoading...を表示します。

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`. 

そして、私は最善の方法は何かを理解していない。だから私はNavigatorに新しいコンポーネントをプッシュしようが、私はエラーを持っている私は、ユーザー・データをフェッチするためにアクションを派遣し、その後、私は私の状態を更新します私の問題を解決する。

だから私のコンテナ：

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); 

私の減速は：

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

Answer 1

はあなたのrender方法の体内できsetState何をトリガしないでください。あなたは、着信小道具に耳を傾ける必要がある場合は、render()からこれを削除しcomponentWillReceiveProps

を使用します。

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

をして componentWillReceiveProps(nextProps)

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