Cannot access store with connect in React-redux

Question

I am using React in my application. I am using connect to access the store, Briefly I have this code:

class MyComponent extends Component{
   constructor(props){
        super(props)
    }

    render(){
      let components = this.props.components;
      if(components.indexOf("SomeString")){
           //some stuffs
      }
        return (
            <SomeElement/>
        )
    }
}


const mapStateToProps = state => {
    return {
        components: state.someReducer.components
    }
}

export default connect(mapStateToProps)(MyComponent)

Components is an array of strings, if I print with console.log(this.props.components) inside the render function, the I am able to see the array in the browser console. However, if I try to find a value inside that array using indexOf then I get this error:

TypeError: components is undefined

So, What am I missing? I tried many things without result

did you define an initial state for the someReducer reducer? — elas
– elas, Commented Aug 30, 2017 at 2:16
@elas yes, indeed when I print the array in the console I see the values and they're correct — Sredny M Casanova
– Sredny M Casanova, Commented Aug 30, 2017 at 2:19
I can be sure with the error that components is getting undefined one reason or another, The problem doesn't lie in the snippet you provided.. maybe its there somewhere higher up. As the others already said, provide a check before rendering the result — Shubham Khatri
– Shubham Khatri, Commented Aug 30, 2017 at 6:15

Khen · Accepted Answer · 2017-08-30 02:26:43Z

2

At first cycle, this.props.components is undefined. You can bypass it using

render(){
      if(this.props.components) {
      let components = this.props.components;
      if(components!=null || components!=undefined){ //this will check if components is null or undefined
        if(components.indexOf("SomeString")){
           //some stuffs
        }}
          return (
            <SomeElement/>
          )
    }

answered Aug 30, 2017 at 2:26

Khen

12511 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sredny M Casanova Over a year ago

ok, but now my question is: why is the array printed in the console pretty well? and it's at first cycle

Khen Over a year ago

Where did you put the console.log? .render() is the first part to be calles in a react lifecycle.

Sredny M Casanova Over a year ago

I out it inside render

Amr Aly · Accepted Answer · 2017-08-30 02:30:37Z

0

You need to check for the this.props.components like so:

render(){
      if(this.props.components) {
        let components = this.props.components;
        if(components.indexOf("SomeString")){
           //some stuffs
        }
        return (
           <SomeElement/>
        )
      } else {
           return(<div>Loading...</div>)
      }
 }

edited Aug 30, 2017 at 2:30

answered Aug 30, 2017 at 2:23

Amr Aly

3,9152 gold badges19 silver badges36 bronze badges

Collectives™ on Stack Overflow

Cannot access store with connect in React-redux

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related