I'm using react with react-native and redux. The error comes to the component from the redux store. After that, i received: Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
What is wrong with this? why hoc can't see the props?
My component:
import React, { Component } from 'react'; import withHandleError from './withHandleError'; class SendScreen extends Component { render() { const { error } = this.props; return ( <div> Test </div> ) } }; const mapStateToProps = ({ppm}) => ({ error: ppm.error }) export default withHandleError(connect(mapStateToProps)(SendScreen));
And HoC:
import React, { Component } from 'react'; import { ErrorScreen } from '../../ErrorScreen'; import { View } from 'react-native'; export default Cmp => { return class extends Component { render() { const {error, ...rest } = this.props; console.log(error) //// undefined.... if (error) { return <ErrorScreen /> } return <Cmp { ...rest } /> } } }
The order is which you call the HOCs matters when you want to access props supplied by one in another. Re-ordering your connect and withHandleError HOC will work
import React, { Component } from 'react';
import withHandleError from './withHandleError';
class SendScreen extends Component {
render() {
const { error } = this.props;
return (
<div> Test </div>
)
}
};
const mapStateToProps = ({ppm}) => ({
error: ppm.error
})
export default connect(mapStateToProps)(withHandleError(SendScreen));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.