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?