CODEWITHSUNDEEP
javascriptreact-native
Marcus
Marcus

Reputation: 57

Why am I getting an error : TypeError: Cannot read property 'map' of undefined?

Getting an error: TypeError: Cannot read property 'map' of undefined. Before reloading the page it's work fine. But when I'm reloading the page getting an error. I want to get object values from array.

enter image description here

import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {fetchData} from '../../actions/fetchData';

class Menu extends Component {
  componentDidMount() {
    this.props.fetchData();
  }

  render() {
    const {data, isFetching} = this.props.data;

    if (isFetching) {
      return (
        <View>
          <ActivityIndicator size={'large'} />
        </View>
      );
    } else {
      return (
        <View
          style={{
            flex: 1,
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text>
            {data.categories.map(nm => nm.name)}
            {/* {console.log("data",data.categories.map(nm => nm.name))} */}
          </Text>
        </View>
      );
    }
  }
}

function mapStateToProps(state) {
  return {
    data: state.data,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    ...bindActionCreators({fetchData}, dispatch),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Menu);

Upvotes: 0

Views: 515

Answers (2)

sabbir
sabbir

Reputation: 2025

I'm not a react-native developer, but have working small experience on react. Here what I can understand as given below:

this.state = {
  data: this.props.data,
};

In above code in constructor, first initialize with state.data, when class instance is called and it will be undefined. Because when first class is called, this.props.data is undefined.

componentDidMount() {
   this.props.fetchData();
}

After constructor's task complete, above code will be executed and it's data is shown in console.log. But returned data is never assign to any variable. That means, after fetching data, this.state.data still is undefined.

so when comes to executing <Text>{this.state.data.data.categories.map(nm => nm.name)}</Text> , this.state.data will be undefined`. To solve this problem, you can try following code:

class Menu extends Component {

  componentDidMount() {
    this.props.fetchData();
  }

  render() {
    return (
      <View>
        <Text>{this.props.data.data.categories.map(nm => nm.name)}</Text>
      </View>
    );
  }
}

And one last thing, I strongly recommend that, you learn react development life-cycle. Thanks

Upvotes: 1

Ehsan Hejazi
Ehsan Hejazi

Reputation: 196

I've got this problem before and i solved it for mapping through images array , because fetching data is asynchronous it seems like data is not available at beginning of rendering and causes of err when mapping , You should handle your app and prevent rendering before data is set into the state , so implement a checker to see data is completely available in state and then let render , it's the only solution and nothing else

Upvotes: 0

Related Questions