尝试得到react-router (v4.0.0)和react-hot loader (3.0.0-beta.6)很好地发挥,但在浏览器控制台得到以下错误:
Warning: React.createElement: type is invalid -- expected a string
(for built-in components) or a class/function (for composite
components) but got: undefined. You likely forgot to export your
component from the file it's defined in.
index.js:
import React from 'react';
import ReactDom from 'react-dom';
import routes from './routes.js';
require('jquery');
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './css/main.css';
const renderApp = (appRoutes) => {
ReactDom.render(appRoutes, document.getElementById('root'));
};
renderApp( routes() );
routes.js:
import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import store from './store/store.js';
import { Provider } from 'react-redux';
import App from './containers/App.jsx';
import Products from './containers/shop/Products.jsx';
import Basket from './containers/shop/Basket.jsx';
const routes = () => (
<AppContainer>
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Products} />
<Route path="/basket" component={Basket} />
</Route>
</Router>
</Provider>
</AppContainer>
);
export default routes;
这是一个在某种程度上必须调试的错误。正如已经说过很多次,不恰当的导入/导出会导致这个错误,但令人惊讶的是,我从我的react-router-dom认证设置中的一个小错误中得到了这个错误,下面是我的情况:
错误的设置:
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route
{...rest}
render={(props) => (token ? <Component {...props} /> : <Redirect to={{ pathname: "/login" }} />)}
/>
);
正确设置:
const PrivateRoute = ({ component: Component, token, ...rest }) => (
<Route
{...rest}
render={(props) => (token ? <Component {...props} /> : <Redirect to={{ pathname: "/login" }} />)}
/>
);
唯一的区别是我在PrivateRoute组件中解构了令牌。顺便说一下,令牌是从localstorage获取的,像这样const token = localstorage . getitem ("authUser");所以如果它不在那里,我知道用户没有验证。这也会导致错误。
// @flow
import React from 'react';
import { styleLocal } from './styles';
import {
View,
Text,
TextInput,
Image,
} from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
export default React.forwardRef((props, ref) => {
const { onSeachClick, onChangeTextSearch , ...otherProps } = props;
return (
<View style={styleLocal.sectionStyle}>
<TouchableOpacity onPress={onSeachClick}>
<Image
source={require('../../assets/imgs/search.png')}
style={styleLocal.imageStyle} />
</TouchableOpacity>
<TextInput
style={{ flex: 1, fontSize: 18 }}
placeholder="Search Here"
underlineColorAndroid="transparent"
onChangeText={(text) => { onChangeTextSearch(text) }}
/>
</View>
);
});
import IGPSSearch from '../../components/IGPSSearch';
<Search onSeachClick={onSeachClick} onChangeTextSearch= {onChangeTextSearch}> </Search>
对于我来说,这发生在我试图将命名导入作为默认导入时,所以我得到了这个错误
import ProductCard from '../../../components/ProductCard' // that what caused the issue
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `TopVente`.
所以我必须通过名称导入来修复它
import { ProductCard } from '../../../components/ProductCard'