Каждый раз, когда я меняю компонент, я получаю предупреждение «Ключ уже определен!» и горячая перезагрузка перестают работать.
Может ли кто-нибудь указать, что я делаю неправильно? Вот в основном что у меня есть:
Основной 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