Question

以下是React Native应用程序启动一段时间后的Android日志输出，然后通过终止Meteor服务器将其与Meteor（DDP）服务器断开连接。

使用console.log("<App /> render")指示何时调用render组件的App功能，只要在render通过后再次调用createContainer函数，它有一些新的props，会触发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);

Answer 1

警告不会造成任何伤害，但您可以通过在变量中定义场景然后将它们作为路径包含在路由器中来消除它们，如下所示：

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} />
    )
  }

}

有关详细信息，请参阅docs。

Answer 2

根据我的经验，警告不会导致任何问题，但为了以防万一，我通常会定义一个shouldComponentUpdate方法，如果道具/状态没有以需要路径更改的方式更改，则返回false （请注意，我使用redux和redux来确定初始场景是什么，因此我需要将组件连接到redux以便通过props获取所需信息，但稍后如果商店中的数据发生变化，我可以安全地阻止其他渲染）。

这只是我的方法，基于我的经验和需求。路由器助焊剂有一个稍微严格的＆＃39;接近这一点，您可以在他们的docs

中看到

react-native-router-flux警告：密钥已经定义

2 个答案: