Question

每次我更改组件时都会收到警告＆＃34; Key已经定义了！＆＃34;和热重装停止工作。

有谁可以指出我做错了什么？这基本上就是我所拥有的：

提供商的主index.ios.js。

// index.ios.js
const store = configureStore();

const Root = () => (
  <Provider store={store}>
    <App />
  </Provider>
);

// Render to the device
AppRegistry.registerComponent('Mythology', () => Root);

store / redux-logger声明

// configureStore.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import promise from 'redux-promise';
import createLogger from 'redux-logger';

import reducer from '../reducers';

const configureStore = () => {
  let store;

  if (__DEV__) {
    const logger = createLogger({ collapsed: true });
    store = createStore(
      reducer,
      applyMiddleware(thunk, promise, logger),
    );
  } else {
    store = createStore(
      reducer,
      applyMiddleware(thunk, promise),
    );
  }
  return store;
};

export default configureStore;

这是App.js

// App.js
class App extends Component {

  componentWillMount() {
    this.props.loginWithToken();
    this.props.fetchQuotes('random', true);
    this.props.fetchAllGreeks();
    this.props.fetchBooks();
  }

  render() {
    return (
      <Router
        scenes={Scenes}
      />
    );
  }
}

App.propTypes = {
  loginWithToken: PropTypes.func.isRequired,
  fetchAllGreeks: PropTypes.func.isRequired,
  fetchQuotes: PropTypes.func.isRequired,
  fetchBooks: PropTypes.func.isRequired,
};

export default connect(null,
  {
    loginWithToken,
    fetchAllGreeks,
    fetchBooks,
    fetchQuotes,
  })(App);

这是Scenes.js

const Scenes = Actions.create(
  <Scene
    key="root"
  >
    <Scene
      key="tabbar"
      tabs
      tabBarStyle={styles.tabBarStyle}
      tabBarIconContainerStyle={{height: null, padding: 10}}
    >
      {/* Homepage */}
      <Scene
        key="home"
        title="Quotes"
        icon={TabIcon}
        navigationBarStyle={styles.navbarStyleWidthShadow}
      >
        <Scene
          key="homepage"
          component={Homepage}
          title="Quotes"
          initial
          renderRightButton={() => <UserIcon />}
        />
      </Scene>
      {/* GreekList page */}
      <Scene
        key="greeks"
        title="Pantheon"
        icon={TabIcon}
      >
        <Scene
          key="greekListPage"
          component={GreekListpage}
          title="Pantheon"
          initial
          renderRightButton={() => <UserIcon />}
          navigationBarStyle={styles.navbarStyle}
        />
        <Scene
          key="singleHeroPage"
          component={SingleHeropage}
          renderRightButton={() => <UserIcon />}
          navigationBarStyle={[styles.navbarStyleWidthShadow, styles.extraShadow]}
        />
      </Scene>
      {/* Books page */}
      <Scene
        key="books"
        title="Books"
        icon={TabIcon}
        navigationBarStyle={styles.navbarStyle}
      >
        <Scene
          key="booksPage"
          component={BookListpage}
          title="Books"
          initial
          renderRightButton={() => <UserIcon />}
        />
        <Scene
          key="singleBookPage"
          component={SingleBookpage}
          renderRightButton={() => <UserIcon />}
        />
      </Scene>
    </Scene>
    <Scene
      key="login"
      title="Login"
      component={Loginpage}
      renderRightButton={() => <UserIcon />}
      navigationBarStyle={styles.navbarStyleWidthShadow}
    />
    <Scene
      key="logout"
      title="Logout"
      component={Logoutpage}
      renderRightButton={() => <UserIcon />}
      navigationBarStyle={styles.navbarStyleWidthShadow}
    />
  </Scene>,
);

export default Scenes;

我尝试过使用componentShouldUptate但没有成功。

如果我遗漏了某些内容，则完整代码位于github：https://github.com/kamiranoff/mythology

Answer 1

我遇到了同样的问题，this解决了我的问题。编辑：这是React Native Router Flux v3。更新后的链接为this。

react-native-router-flux，Hot-reloading和Key XXX已在React-native中定义

1 个答案: