我有这个组件:
let Vepo = (props) => (
<Container >
<Header style={styles.header}>
<Left>
<Button transparent>
</Button>
</Left>
<Body>
<Title style={styles.title}>Search</Title>
</Body>
<Right>
</Right>
</Header>
<Container style={styles.container}>
<ScrollView >
<Keywords />
<Categories />
</ScrollView>
</Container>
</Container>
)
Vepo = connect(
null,
null
)(Vepo)
export default Vepo
但现在我需要实施ComponentDidMount
所以this example of using a higher order component:
class Wrapper extends Component {
componentDidMount() {
this.props.getAllTehDatas();
}
render() {
<WrappedComponent {..this.props} />
}
}
const mapStateToProps = () => ({
});
const mapDispatchToProps = {
getAllTehDatas
};
export default connect(mapStateToProps, mapDispatchToProps)(Wrapper);
我应该可以这样做:
let Vepo = (props) => (
<Container >
<Header style={styles.header}>
<Left>
<Button transparent>
</Button>
</Left>
<Body>
<Title style={styles.title}>Search</Title>
</Body>
<Right>
</Right>
</Header>
<Container style={styles.container}>
<ScrollView >
<Keywords />
<Categories />
</ScrollView>
</Container>
</Container>
)
class Wrapper extends Component {
componentDidMount() {
console.log("loaded")
}
render() {
<Vepo />
}
}
Vepo = connect(
null,
null
)(Wrapper)
export default Vepo
但是我收到了这个错误:
Wrapper.render():必须返回有效的react元素或null。您 可能已经返回undefined,以及其他一些对象的数组。
我哪里错了?
答案 0 :(得分:0)
关于 Wrapper 的渲染,你放弃了它的回报。将渲染更改为:
import { combineReducers } from 'redux';
import UserReducer from '../User/UserReducer'
export default combineReducers({
UserReducer
});