ReactNative TypeError: undefined is not an object

Question

I am running the following code in iOS emulator but I am getting undefined is not an object (evaluating 'Object.keys(dataBlob[sectionID])') error. Please, could you help me to see what I am doing wrong?

this.state = { dataSource: this.ds.cloneWithRows(props.projects), <== ERROR POINT initialLoading: false, refreshing: false };

//import liraries
import React, {Component} from 'react';
import {View, StyleSheet, Alert, ScrollView, RefreshControl, ListView, ActivityIndicator} from 'react-native';

import PropTypes from 'prop-types';
import ViewPropTypes from 'react-native';
import StatusBar from '../components/common/StatusBar';
import Header from '../components/common/Header';
import Subtitle from '../components/common/Subtitle';
import ProjectThumbnail from '../components/project/ProjectThumbnail';
import FilterButton from '../components/common/BottomButton';
import mockData from "../data/mockData";
import * as globalStyles from '../styles/global';

// create a component
export default class ProjectList extends Component {

  constructor(props) {
    super(props);
    this.ds = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1.title !== row2.title 
    });
    this.state = {
      dataSource: this.ds.cloneWithRows(props.projects), 
      initialLoading: false, 
      refreshing: false
    };

    console.log(this.state.dataSource);
    this.renderRow = this.renderRow.bind(this);
    this.refresh = this.refresh.bind(this); 

  }

  componentWillMount() { 
    this.refresh();
  }

  componentWillReceiveProps(nextProps) { 
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(nextProps.projects),
      initialLoading: false
    });
  }

  refresh() { 
    if (this.props.loadProjects) {
      this.props.loadProjects();
    }
  }

  renderRow(rowData, ...rest) { 
    const index = parseInt(rest[1], 10);
    return (
      <ProjectThumbnail
        style={styles.ProjectThumbnail}
        index={index}
        {...rowData} 
      />
    );
  }


  render() {
    const {
      listStyles = globalStyles.COMMON_STYLES.pageContainer,
      showLoadingSpinner
    } = this.props;
    const { initialLoading, refreshing, dataSource } = this.state;

    return (
      (initialLoading && showLoadingSpinner
        ? (
          <View style={[listStyles, styles.loadingContainer]}>
            <ActivityIndicator
              animating
              size="small"
              {...this.props}
            />
          </View>
        ) : (
          <View style={styles.container}>
            <StatusBar />
            <Header navigation={this.props.navigation} />
            <Subtitle subtitle="프로젝트" />
            <ListView
              refreshControl={
                <RefreshControl
                  refreshing={refreshing}
                  onRefresh={this.refresh}
                />
              }
              enableEmptySections 
              dataSource={dataSource} 
              renderRow={this.renderRow}
              style={listStyles}
            />
            
            <FilterButton
              title="필터 적용"
              IconName="ios-options"
              onPress={() => alert ('button Pressed')}
            />
          </View>
        )
      )
    );
  }
}

ProjectList.propTypes = {
  projects: PropTypes.arrayOf(PropTypes.object),
  listStyles: ViewPropTypes.style,
  loadProjects: PropTypes.func,
  showLoadingSpinner: PropTypes.bool 
};

ProjectList.defaultProps = {
  showLoadingSpinner: true 
};


const styles = StyleSheet.create ({
  ProjectThumbnail: {
    marginBottom: 20
  },
  container: {
    flex: 1,
  },
  loadingContainer: {
    alignItems: 'center',
    justifyContent: 'center'
  },

});

ERROR MASSAGE OF iOS SIMULATOR

=>> ERROR MASSAGE IMAGE

Answer 1

I recommend using this library to StateManger for some reasons First, it's very simple to implement Second, it has high performance than Redux this Lib React-Beep ==> Link