尝试得到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;
// @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>
就我而言，VS Code让我失望了。
这是我的组件的层次结构:
<HomeScreen> => <ProductItemComponent> => <BadgeProductComponent>
我错误地导入了ProductItemComponent。事实上，这个组件以前在共享文件夹中，但后来它被移动到主文件夹中。但是当我将文件移动到另一个文件夹时，导入没有更新，保持不变:
../shared/components
同时，组件工作正常，VS Code没有突出显示错误。但是当我添加了一个新的BadgeProductComponent到ProductItemComponent，我有一个渲染错误，并认为问题是在新的BadgeProductComponent，因为当这个组件被删除，一切工作!
更重要的是，如果我通过热键到ProductItemComponent它有。/shared/components地址，然后VS Code重定向到Home文件夹的地址../ Home /components。
通常，检查所有组件级别上所有导入的正确性。
这是一个在某种程度上必须调试的错误。正如已经说过很多次，不恰当的导入/导出会导致这个错误，但令人惊讶的是，我从我的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");所以如果它不在那里，我知道用户没有验证。这也会导致错误。
