Cảnh báo phản ứng-native-router-flux: Khóa đã được xác định

Question

Sau đây là bản ghi nhật ký Android khi ứng dụng React Native được khởi động trong một thời gian trước khi ngắt kết nối nó khỏi máy chủ Meteor (DDP) bằng cách giết chết máy chủ Meteor.

Sử dụng console.log("<App /> render") để chỉ khi render chức năng của App thành phần được gọi là, dường như bất cứ khi nào chức năng render được gọi trở lại sau createContainer vượt qua nó một số mới props, lỗi Key is already defined được kích hoạt.

Điều gì gây ra lỗi/cảnh báo này và cách chúng tôi có thể khắc phục? Các ứng dụng vẫn chạy tốt, nhưng một cái gì đó chắc chắn là sai ở đây.

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 Component

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

Answer 1

Theo kinh nghiệm của tôi những lời cảnh báo không gây ra bất kỳ vấn đề, nhưng chỉ trong trường hợp, tôi thường xác định phương thức shouldComponentUpdate trả về false nếu đạo cụ/trạng thái không thay đổi theo cách t hat sẽ yêu cầu route thay đổi (lưu ý rằng tôi sử dụng redux và redux để quyết định cảnh ban đầu là gì, và vì vậy tôi cần kết nối component với redux để nhận thông tin yêu cầu qua props, nhưng sau đó nếu dữ liệu trong thay đổi cửa hàng, tôi có thể chặn một cách an toàn thêm hiển thị).

Đó chỉ là cách tiếp cận của tôi dựa trên kinh nghiệm và nhu cầu của tôi. Các kẻ định tuyến có cách tiếp cận hơi nghiêm ngặt hơn, bạn có thể thấy trong các cảnh báo docs

Answer 2

Cảnh báo không gây hại, nhưng bạn có thể loại bỏ chúng bằng cách xác định cảnh của bạn trong một biến và sau đó bao gồm chúng như một biện pháp để bộ định tuyến của bạn như vậy:

Xem docs để biết thêm thông tin.