React Native: TypeError: this.state.schedule.map is not an object

Question

Hey I am new to React Native and currently I'm trying to put data in a picker using data from API. I'm confused that it got error say TypeError: null is not an object (evaluating this.state.schedules.map). Is there something wrong with the state or is there any concept that I misunderstood

Here is fetch API

export function getSchedule (token, resultCB) {
    var endpoint = "/api/getList"

    let header = {
        "Content-Type": "application/x-www-form-urlencoded",
        "Authorization": "Bearer " + token
    };

    return dispatch => {
        return fetchAPI(endpoint, 'GET', header)
            .then((json) => {          
                dispatch({ type: t.SCHEDULE, schedules: json.datas.description });
                resultCB(json.schedules)
            })
            .catch((error) => {
                dispatch({ type: types.EMPTY_SCHEDULE });       
                resultCB(error)
            })
    }
}

this is where i put my picker

export const mapStateToProps = state => ({
  token: state.authReducer.token,
  message: state.authReducer.message,
  schedules: state.authReducer.schedules
});

export const mapDispatchToProps = (dispatch) => ({
  actionsAuth: bindActionCreators(authAction, dispatch)
});

class Change extends Component {
    
  constructor(){
        super();
        this.state={
            staffId: "",
            schedule: '',
            type_absen: 1,
            schedules: null
        }

    }
    
componentDidMount(){
    this.props.actionsAuth.getSchedule(this.props.token);
  }
  
  render() {
      return (
  
                  <View style={styles.picker}>
                    <Picker
                    selectedValue={this.state.schedule}
                    style={{backgroundColor:'white'}}
                    onValueChange={(sch) => this.setState({schedule: sch})}>
                    {this.state.schedules.map((l, i) => {
                    return <Picker.Item value={l} label={i} key={i}  /> })} 
                    </Picker>
                  </View>

      );
  }
}
  export default connect(mapStateToProps, mapDispatchToProps)(Change);

Answer 1

This isn’t a React Native specific error. You initialized schedules to null so on first render, you try to call .map on null. That’s what is causing your error.

You fetch your data correctly in componentDidMount but that lifecycle method will fire after the initial render.

One common way to fix this is to initialize schedules to an empty array.