7

React NativeアプリをMetadataサーバーを強制終了してMeteor(DDP)サーバーから切断する前にReact Nativeアプリを起動したときのAndroidログの出力は次のとおりです。それはAppコンポーネントのrender関数が呼び出されたとき、render機能がcreateContainer経過後、再び呼び出されるたびに表示されていることを示すために、いくつかの新しいpropsconsole.log("<App /> render")を使用してreact-native-router-flux警告:キーが既に定義されています

は、Key is already definedエラーがトリガされます。

このエラー/警告の原因は何ですか?どのように修正できますか?アプリはまだうまく動作しますが、ここで何か間違っています。私の経験で

12-23 02:27:01.875 31197 19338 I ReactNativeJS: Running application "RNapp" with appParams: {"initialProps":{},"rootTag" 
:1}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF 
12-23 02:27:01.891 31197 19338 I ReactNativeJS: render 
12-23 02:27:01.995 31197 19338 I ReactNativeJS: Connected to DDP server. 
12-23 02:27:01.999 31197 19338 I ReactNativeJS: Connected to DDP server. 
12-23 02:27:02.012 31197 19338 I ReactNativeJS: render 
12-23 02:27:02.013 31197 19338 I ReactNativeJS: Key home is already defined! 
12-23 02:27:02.013 31197 19338 I ReactNativeJS: Key welcome is already defined! 
12-23 02:27:02.013 31197 19338 I ReactNativeJS: Key loading is already defined! 
12-23 02:27:02.013 31197 19338 I ReactNativeJS: Key root is already defined! 
12-23 02:27:34.592 31197 19338 I ReactNativeJS: Disconnected from DDP server. 
12-23 02:27:34.593 31197 19338 I ReactNativeJS: Disconnected from DDP server. 
12-23 02:27:34.599 31197 19338 I ReactNativeJS: <App /> render 
12-23 02:27:34.599 31197 19338 I ReactNativeJS: Key home is already defined! 
12-23 02:27:34.599 31197 19338 I ReactNativeJS: Key welcome is already defined! 
12-23 02:27:34.599 31197 19338 I ReactNativeJS: Key loading is already defined! 
12-23 02:27:34.599 31197 19338 I ReactNativeJS: Key root is already defined! 
12-23 02:27:34.609 31197 19338 I ReactNativeJS: <Loading /> render 
12-23 02:27:35.603 31197 19338 I ReactNativeJS: Disconnected from DDP server. 
12-23 02:27:35.613 31197 19338 I ReactNativeJS: <App /> render 
12-23 02:27:35.613 31197 19338 I ReactNativeJS: Key home is already defined! 
12-23 02:27:35.613 31197 19338 I ReactNativeJS: Key welcome is already defined! 
12-23 02:27:35.613 31197 19338 I ReactNativeJS: Key loading is already defined! 
12-23 02:27:35.613 31197 19338 I ReactNativeJS: Key root is already defined! 
12-23 02:27:45.599 31197 19338 I ReactNativeJS: Disconnected from DDP server. 
12-23 02:27:45.616 31197 19338 I ReactNativeJS: <App /> render 
12-23 02:27:45.616 31197 19338 I ReactNativeJS: Key home is already defined! 
12-23 02:27:45.616 31197 19338 I ReactNativeJS: Key welcome is already defined! 
12-23 02:27:45.616 31197 19338 I ReactNativeJS: Key loading is already defined! 
12-23 02:27:45.616 31197 19338 I ReactNativeJS: Key root is already defined! 

index.android.js

import { AppRegistry } from 'react-native' 

import App from './app/App.js' 

AppRegistry.registerComponent('RNapp',() => App) 

Appコンポーネント

export class App extends Component { 

    constructor(props) { 
     super(props); 
    } 

    componentWillReceiveProps(nextProps) { 
     if (nextProps.status.connected == false) { 
      Actions.loading(); 
     } else { 
      if (nextProps.user !== null) { 
       Actions.home(); 
      } else { 
       Actions.welcome(); 
      } 
     } 
    } 


    render() { 
     console.log('<App /> render') 
     return (
      <Router> 
       <Scene key="root"> 
        <Scene key="home" component={Home} title="Home" hideNavBar={true} /> 
        <Scene key="welcome" component={Welcome} title="Welcome" hideNavBar={true} /> 
        <Scene key="loading" component={Loading} title="Loading" hideNavBar={true} /> 
        <Scene key="profile" component={Profile} title="Home" hideNavBar={true} /> 
        <Scene key="history" component={History} title="Home" hideNavBar={true} /> 
        <Scene key="search" component={Search} title="Home" hideNavBar={true} /> 
       </Scene> 
      </Router> 
     )  
    } 

} 


export default createContainer(() => { 
    return { 
    status: Meteor.status(), 
    user: Meteor.user(), 
    loggingIn: Meteor.loggingIn(), 
    }; 
}, App); 

答えて

1

警告は問題が発生することはありませんが、念のため、私は通常shouldComponentUpdateメソッドを定義して、小道具/状態が変更されていない場合はfalseを返します。帽子はルートを変更する必要があります(私はreduxとreduxを使って初期シーンを決定しますので、必要な情報を得るためにコンポーネントをreduxに接続する必要がありますが、後でストアが変更された場合、追加のレンダリングを安全にブロックできます)。

これは私の経験とニーズに基づく私のアプローチです。

1

警告は何も問題はありませんが、あなたのシーンを変数で定義して取り除くことができます。そして、そのようなあなたのルーターへの小道具として、それらを含む:

は、詳細はdocsを参照してください。

+0

静的なシーンは決して役に立ちません。 renderが呼び出されると、ルータが再レンダリングされ、警告メッセージが生成され、シーン階層の初期コンポーネントが再レンダリングされます。 –

関連する問題