JavaScript的
以下是在React Native应用程序启动一段时间之前的Android日志输出，然后通过关闭Meteor服务器将其从Meteor（DDP）服务器断开连接。
使用console.log("<App /> render")来指示何时调用App组件的render函数，看起来无论何时在createContainer传递一些新的props之后再次调用render函数时， 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);
这些警告不会造成任何伤害，但您可以通过在变量中定义场景来消除它们，然后将它们作为道具包含在您的路由器中，如下所示：
const scenes = Actions.create(
<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>
)
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 scenes={scenes} />
)
}
}
有关更多信息，请参阅文档。
根据我的经验，警告不会导致任何问题，但为shouldComponentUpdate万一，我通常会定义一个shouldComponentUpdate方法，如果道具/状态没有以需要更改路线的方式进行更改，则返回false（请注意，我使用了redux和redux持续决定什么是最初的场景，所以我需要将组件连接到redux以通过道具获取所需的信息，但是如果商店中的数据发生更改，我可以安全地阻止其他渲染）。
这只是我的经验和需求。 路由器助手们有一个稍微“严格”的方法，你可以在他们的文档中看到
链接地址: http://www.djcxy.com/p/37793.html上一篇: javascript