TypeError: undefined is not an object (evaluating 'item.id') in react native

Viewed 2009

I am trying to get the data that I stored in the database earlier and render it in flatlist and for this, I stored the data in the state.

Error: TypeError: undefined is not an object (evaluating 'item.id')

const PlacesListScreen = (props) => {
  const dispatch = useDispatch();
  useEffect(() => {
    const fetchPlacesFn = async () => {
      try {
        const dbResult = await fetchData();
        console.log("dbResult(List Screen) :", dbResult);
        dispatch(placesActions.fetchPlaces(dbResult));
      } catch (err) {
        console.log(err);
      }
    };
    fetchPlacesFn();
  }, [places]);

  const places = useSelector((state) => state.places.places);
  console.log("places (List Screen):", places);

From the above code, I am dispatching the function. Below the logs output.

dbResult(List Screen) : WebSQLResultSet {
  "insertId": undefined,
  "rows": WebSQLRows {
    "_array": Array [
      Object {
        "address": "Dummy address",
        "id": 1,
        "imageUri": "file:///var/mobile/Containers/Data/Application/3727637A-7613-48BD-B913-14215CD4DF25/Documents/ExponentExperienceData/%2540harsh_mishra%252FTravel/61939ADC-5921-46AD-B4F9-447408D33605.jpg",
        "lat": 15.2,
        "lng": 16.2,
        "title": "Home",
      },
      Object {
        "address": "Dummy address",
        "id": 2,
        "imageUri": "file:///var/mobile/Containers/Data/Application/3727637A-7613-48BD-B913-14215CD4DF25/Documents/ExponentExperienceData/%2540harsh_mishra%252FTravel/3B8324EC-48FD-445E-9922-C7421A2B783F.jpg",
        "lat": 15.2,
        "lng": 16.2,
        "title": "home",
      },
    ],
    "length": 6,
  },
  "rowsAffected": 0,
}

places (List Screen): Array [
  undefined,
  undefined,
  undefined,
  undefined,
  undefined,
  undefined,
]


Below is my action which I am dispatching above from the PlacesListScreen screen.

export const fetchPlaces = (dbResult) => {
  console.log("dbResult (Actions) :", dbResult); //same output above of places(Database)
  console.log(
    "dbResult.rows._array :",
    dbResult.rows._array.map((pl) => {
      return pl.title;
    }) 
  );
  return {
    type: FETCH_PLACES,
    places: dbResult.rows._array,
  };
};

Log output for the console of above code is below.

dbResult.rows._array : Array [
  "Home",
  "home",
  "Home",
  "Home ",
  "Home2",
  "Home3",
]

Below code is my reducer where I am changing the state from the places I am getting from Database.


export default (state = initialState, action) => {
  switch (action.type) {
    case FETCH_PLACES:
      return {
        places: action.places.map((pl) => {
          new Place(pl.id.toString(), pl.title, pl.imageUri);
        }),
      };

I am getting undefined in places when I am trying to fetch the state from PlacesListScreen screen.

I am not able to figure out why I am getting undefined 6 times in an array of places instead of data that I am setting in the state in the reducer?

What changes should I make to make it work?

0 Answers
Related