CODEWITHSUNDEEP
javascriptreact-nativereact-reduxaxios
Michael Andreas Troute
Michael Andreas Troute

Reputation: 23

React Native FlatList Error -- "Possible Unhandled Promise Rejection (id: 0): undefined is not an object"

Okay, here's the situation:

I'm working on a React Native app using Redux, and I want to display the results of a GET request (made using Axios) using a FlatList. However, when I try to render that data using a FlatList, I get an error, and nothing at all is displayed! I'm sure that data is being returned, because I can display it using normal Text components, but I need to be able to put it all into a FlatList.

Totally flummoxed by the following error: screenshot of error

The action I'm dispatching to make the call is as follows (I'm using promise middleware):

{
  type: 'PROPOSALS_FETCH_PAGE',
  payload: axios.get(base + '/proposals/get_recent?page=1'),
}

My reducer code is as follows:

const defaultState = {
  fetching: false,
  fetched: false,
  proposalList: [],
  error: null,
};

const proposalReducer = (state=defaultState, action) => {
  switch (action.type) {
    case "PROPOSALS_FETCH_PAGE_PENDING":
      state = {...state, fetching: true, fetched: false};
      break;
    case "PROPOSALS_FETCH_PAGE_FULFILLED":
      state = {...state, fetching: false, fetched: true, proposalList: action.payload.data.data.proposals};
      break;
    case "PROPOSALS_FETCH_PAGE_REJECTED":
      state = {...state, fetching: false, fetched: false, error: action.payload.message};
      break;
    default: break;
  }
  return state;
}

export default proposalReducer;

Finally, the smart component I'm using to actually display all this:

import Proposal from './Proposal'

class ProposalFeed extends Component {
  constructor(props) {
    super(props);
    props.dispatch(fetchProposalPage(1));
  }

  render() {
    const proposals = this.props.proposal.proposalList.map(
      proposal => ({...proposal, key:proposal.id})
    );

    return (
      <View>
        <FlatList
          data={proposals}
          renderItem={({proposal}) => (<Proposal
            name={proposal.name}
            summary={proposal.summary}
          />)}
        />
      </View>
    );
  }
}

export default connect((store) => {
  return {
    proposal: store.proposal,
  }
})(ProposalFeed);

And the dumb "Proposal" component!

import styles from './Styles';

class Proposal extends Component {
  render() {
    return (
      <View style={styles.horizontalContainer}>
        <View style={styles.verticalContainer}>
          <Text style={styles.name}>{this.props.name}</Text>
          <Text style={styles.summary}>{this.props.summary}</Text>
          <View style={styles.bottom}></View>
        </View>
      </View>
    )
  }
}

export default Proposal;

Any help would be HUGELY appreciated! I've been looking around for a solution to this for a while, and absolutely nothing has worked. I'm also worried the problem might be the middleware that I'm using (redux-promise-middleware), but I'm not sure.

Upvotes: 2

Views: 1357

Answers (2)

alexwan02
alexwan02

Reputation: 753

Before

  <View>
    <FlatList
          data={proposals}
          renderItem={({proposal}) => (<Proposal
            name={proposal.name}
            summary={proposal.summary}
          />)}
        />
   </View>

After 

<View>
   <FlatList
      data={proposals}
      renderItem={({item}) => (<Proposal
      name={item.name}
      summary={item.summary}
      />)}
    />
 </View>

replace proposal to item。 It seems that FlatList is forced to use the item as renderItem's object

Upvotes: 3

Codesingh
Codesingh

Reputation: 3384

Not good way to implement redux with API call, below is a way i follow to implement API call...

//Actions

export function fetchStart() {
 return  {
  type: 'PROPOSALS_FETCH_PAGE_PENDING',
  }
}


export function fetchSuccess(data) {
 return  {
  type: 'PROPOSALS_FETCH_PAGE_FULFILLED', 
  data
  }
}


export function fetchFailure(err) {
 return  {
  type: 'PROPOSALS_FETCH_PAGE_REJECTED',
  err
  }
}

The below function is the main function that you need to digest in order to fetch data in a proper way.

export function fetchPage()
{
  return (dispatch) => {
   dispatch(fetchStart())
   axios.get(base + '/proposals/get_recent?page=1').
   then((response) =>  dispatch(fetchSuccess(response)))
   .catch((err) => { dispatch(fetchFailure(err)) })
  }
} 

//reducer

const defaultState = {
  fetching: false,
  fetched: false,
  proposalList: [],
  error: null,
};

const proposalReducer = (state=defaultState, action) => {
  switch (action.type) {
    case "PROPOSALS_FETCH_PAGE_PENDING":
      state = {...state, fetching: true, fetched: false};
      break;
    case "PROPOSALS_FETCH_PAGE_FULFILLED":
      state = {...state, fetching: false, fetched: true, proposalList: action.data.data.proposals};
      break;
    case "PROPOSALS_FETCH_PAGE_REJECTED":
      state = {...state, fetching: false, fetched: false, error: action.err.message};
      break;
    default: break;
  }
  return state;
}

//component
constructor(props) {
    super(props);
    //the main function is called here
    props.dispatch(fetchPage());
  }

Cheers :)

Upvotes: 0

Related Questions