In my app, I am trying to add a new product that uses getState().userId as a key so that If I use the same email I will see that added product in my admin section but sometimes, I am not able to add product, and my app giving me an error saying: VirtualizedList: missing keys for items, make sure to specify a key or id property on each item or provide a custom keyExtractor.
So, for debugging purposes, I checked the getState.userId I am getting and I get different userId from redux that's why I can't see my product in my admin area as I have added their ownerId===userId.
But, After reloading or refreshing the app, I am able to see my product there and also able to add product with the correct userId on firebase.
store/action/product.js:
import { createAsyncThunk } from "@reduxjs/toolkit";
import Product from "../../models/Product";
export const CREATE_PRODUCT = "CREATE_PRODUCT";
export const SET_PRODUCT = "SET_PRODUCT";
export const fetchProducts = () => {
return async (dispatch, getState) => {
const userId = getState().Auth.userId;
try {
const response = await fetch(
"https://shopping-app-62e38-default-rtdb.firebaseio.com/products.json"
);
if (!response.ok) {
throw new Error("Something went wrong!");
}
const resData = await response.json();
const loadedProducts = [];
for (const key in resData) {
loadedProducts.push(
new Product(
key,
resData[key].ownerId,
resData[key].title,
resData[key].imageUrl,
resData[key].description,
resData[key].price
)
);
}
dispatch({
type: SET_PRODUCT,
products: loadedProducts,
userProducts: loadedProducts.filter((prod) => prod.ownerId === userId),
});
} catch (error) {
throw error;
}
};
};
export const createProduct = (title, description, imageUrl, price) => {
return async (dispatch, getState) => {
const token = getState().Auth.token;
const userId = getState().Auth.userId;
console.log(getState());
const response = await fetch(
`https://shopping-app-62e38-default-rtdb.firebaseio.com/products.json?auth=${token}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
title,
description,
imageUrl,
price,
ownerId: userId,
}),
}
);
const resData = await response.json();
console.log(userId);
dispatch({
type: CREATE_PRODUCT,
productData: {
id: resData.name,
title,
description,
imageUrl,
price,
ownerId: userId,
},
});
};
};
I tried adding a product. But I got same error mentioned above.
console.log()- getState() :
"Auth": Object {
"token": "9WwCUWtUeDaeHPHfURuBMSAaT553",
"userId": "eyJhbGciOiJSUzI1NiIsImtpZCI6IjFiYjk2MDVjMzZlOThlMzAxMTdhNjk1MTc1NjkzODY4MzAyMDJiMmQiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL3NlY3VyZXRva2VuLmdvb2dsZS5jb20vc2hvcHBpbmctYXBwLTYyZTM4IiwiYXVkIjoic2hvcHBpbmctYXBwLTYyZTM4IiwiYXV0aF90aW1lIjoxNjI3MDY5NTM1LCJ1c2VyX2lkIjoiOVd3Q1VXdFVlRGFlSFBIZlVSdUJNU0FhVDU1MyIsInN1YiI6IjlXd0NVV3RVZURhZUhQSGZVUnVCTVNBYVQ1NTMiLCJpYXQiOjE2MjcwNjk1MzUsImV4cCI6MTYyNzA3MzEzNSwiZW1haWwiOiJ0ZXN0QGdtYWlsLmNvbSIsImVtYWlsX3ZlcmlmaWVkIjpmYWxzZSwiZmlyZWJhc2UiOnsiaWRlbnRpdGllcyI6eyJlbWFpbCI6WyJ0ZXN0QGdtYWlsLmNvbSJdfSwic2lnbl9pbl9wcm92aWRlciI6InBhc3N3b3JkIn19.Yq2CjY7anrwuQSt2N5nMSa3vUKh1gFiIuyO1Mw4-WQwbf_y9b9IYOHSG1YkXgFoyONOV71DOlT9JmWzGu9g2aFSKKUU3LffTY5WNQd5-Qm9QdbhHB0CtOAPJZ124FKiLLS0wJh0nVZKez8_6dH2ICOCw3e-lyktHOc6R11s_9xhEF1LLYv20b7BziWy6T_VHZOcUsiJbBwn09lx1SKkK4Ic3iEsWNeg-lSAgPJGO-sClUmwW9ffA3L1p8OvZubSNirKcGbRYkC323wXnlWv-tqqj6CW-uNc448i6qsmrs2RRR_f4WdLFN9dvv_PBjsf7V8r0m_HY4jjDzScNLLA4Hg",
},
"cart": Object {
"items": Object {},
"totalAmount": 0,
},
"orders": Object {
"orders": Array [],
},
"products": Object {
"availableProducts": Array [
Product {
"description": "Apple Macbook Air M1 chip",
"id": "-Md76UnJ1I1lNhGgldH3",
"imageUrl": "https://www.zdnet.com/a/hub/i/r/2020/11/23/77824151-c578-4431-8f00-633b1b7c0b99/thumbnail/770x433/3b5a2366cdeef2dc08730041abdcf426/macbook-air-m1-header.jpg",
"ownerId": undefined,
"price": 1200,
"title": "Macbook Air M1 2020",
},
Product {
"description": "Apple · iPhone 64GB Blue· iPhone 12 mini · iOS · 5.4 inches screen · Facial Recognition · 12 MP Front Camera · 12 MP Rear Camera · Smartphone · Wireless Charging",
"id": "-Mekel4gfFtgNUviidau",
"imageUrl": "https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcS_WPpNagW5q_-KAep1QkiInHfUYADs8qv84Z_FqKwMmW-J7nleMbl5y6muot5dxxRCOBZ-S_dYxxp_QpmTqzSnTj9oKQuH84kSCYjAZXT6UIsrnWJowbMMLw&usqp=CAE",
"ownerId": "9WwCUWtUeDaeHPHfURuBMSAaT553",
"price": 956.99,
"title": "Apple iPhone 12 Mini",
},
],
"userProducts": Array [],
},
}
console.log()-userID:
eyJhbGciOiJSUzI1NiIsImtpZCI6IjFiYjk2MDVjMzZlOThlMzAxMTdhNjk1MTc1NjkzODY4MzAyMDJiMmQiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL3NlY3VyZXRva2VuLmdvb2dsZS5jb20vc2hvcHBpbmctYXBwLTYyZTM4IiwiYXVkIjoic2hvcHBpbmctYXBwLTYyZTM4IiwiYXV0aF90aW1lIjoxNjI3MDY5NTM1LCJ1c2VyX2lkIjoiOVd3Q1VXdFVlRGFlSFBIZlVSdUJNU0FhVDU1MyIsInN1YiI6IjlXd0NVV3RVZURhZUhQSGZVUnVCTVNBYVQ1NTMiLCJpYXQiOjE2MjcwNjk1MzUsImV4cCI6MTYyNzA3MzEzNSwiZW1haWwiOiJ0ZXN0QGdtYWlsLmNvbSIsImVtYWlsX3ZlcmlmaWVkIjpmYWxzZSwiZmlyZWJhc2UiOnsiaWRlbnRpdGllcyI6eyJlbWFpbCI6WyJ0ZXN0QGdtYWlsLmNvbSJdfSwic2lnbl9pbl9wcm92aWRlciI6InBhc3N3b3JkIn19.Yq2CjY7anrwuQSt2N5nMSa3vUKh1gFiIuyO1Mw4-WQwbf_y9b9IYOHSG1YkXgFoyONOV71DOlT9JmWzGu9g2aFSKKUU3LffTY5WNQd5-Qm9QdbhHB0CtOAPJZ124FKiLLS0wJh0nVZKez8_6dH2ICOCw3e-lyktHOc6R11s_9xhEF1LLYv20b7BziWy6T_VHZOcUsiJbBwn09lx1SKkK4Ic3iEsWNeg-lSAgPJGO-sClUmwW9ffA3L1p8OvZubSNirKcGbRYkC323wXnlWv-tqqj6CW-uNc448i6qsmrs2RRR_f4WdLFN9dvv_PBjsf7V8r0m_HY4jjDzScNLLA4Hg
After some refresh or log in again, I am able to see my product added before and which was already on firebase now fetched from and shown on admin area as I am getting correct userId from getState().
Note: The product I tried above is not added but some products I already added and which were not fetched as userId I am getting is incorrect.
When I am getting the correct userId from firebase which is also my ownerId then I am able to see my product in my admin area.
I am getting idToken in userId instead of localId. I don't know why and how to solve this.
from getState() in redux giving different userId in react native
No comments:
Post a Comment