React-redux: Warning before mapping or render

Created on 31 Jan 2017  路  2Comments  路  Source: reduxjs/react-redux

I have a chart container that wraps a chart component using react-redux's connect().

The container maps the state to the prop 'data'. However:
Warning: Failed prop type: The prop 'data' is marked as required in 'Connect(Chart)', but its value is 'undefined'.

screenshot from 2017-01-31 15-22-06

This occurs _before_ mapStateToProps has even run and before even render has been called, as seen by the console logs, at which point data exists.

If state is undefined, the mapStateToProps function returns an empty array for data, something like this:
function mapStateToProps(state) { return { data: state.data || [], } }

So my question is why is this warning occurring before any mapping and rendering takes place?

It's clearly wrapped by connect (it's called Connect(Chart)), so the fault would probably lie there?

Any help is appreciated.

Most helpful comment

My guess is that you are using connect as a decorator, and applying PropTypes definitions to the generated wrapper component instead of the "plain" component. As an example:

@connect(mapState)
class MyComponent extends Component { }

MyComponent.propTypes = {}

You need to ensure that the PropTypes settings are applied to the wrapped component instead. (This is one of several reasons why the Redux team discourages use of connect as a decorator, and encourages the use of it as a function call instead.)

All 2 comments

My guess is that you are using connect as a decorator, and applying PropTypes definitions to the generated wrapper component instead of the "plain" component. As an example:

@connect(mapState)
class MyComponent extends Component { }

MyComponent.propTypes = {}

You need to ensure that the PropTypes settings are applied to the wrapped component instead. (This is one of several reasons why the Redux team discourages use of connect as a decorator, and encourages the use of it as a function call instead.)

Yes, I was applying propTypes to the container. Thanks.

How would one then "require" a prop in a container which is not used in the component?

Thanks again.

Was this page helpful?
0 / 5 - 0 ratings