[英]Accessing nested object values inside an array when using map to iterate over the array of objects
我的數組由多個對象組成,如下所示:
{
"id": 2,
"nom_operation": "opSavCreationTest2",
"num_serie": "1203250cd81b2101",
"address_mac": "04:15:d9:00:00:49",
"description": "opSavCreationTest2",
"adminId": 82,
"produitId": 1,
"clientId": 2,
"status": "produit_recu",
"lieu_achat_produit": "opSavCreationTest2",
"garanti_au": "07-02-2021",
"createdAt": "2020-03-27T15:15:55.207Z",
"updatedAt": "2020-03-27T15:15:55.207Z",
"produit": {
"id": 1,
"nom_produit": "PURE BLACK MAT",
"type_produit": "Pure",
"couleur_produit": "black_mat",
"nbr_op_sav_en_cours": 7,
"img": "img",
"createdAt": "2020-03-30T08:41:39.597Z",
"updatedAt": "2020-03-30T15:37:09.294Z"
},
"client": {
"id": 2,
"nomClient": "opSavCreationTest2",
"numTel": "5775757575",
"email": "opSavCreationTest2",
"addresse": "opSavCreationTest2",
"ville": "opSavCreationTest2",
"pays": "opSavCreationTest2",
"createdAt": "2020-03-27T15:15:55.043Z",
"updatedAt": "2020-03-27T15:15:55.043Z"
},
"admin": {
"id": 82,
"nom": "administrateur",
"email": "aeaffeef@gmail.com",
"mot_de_passe": "efefr3lnr8Fr4IwEsc=",
"last_login": null,
"role": "administrateur",
"createdAt": "2020-03-23T09:08:43.585Z",
"updatedAt": "2020-03-23T09:08:43.585Z"
}
}
當我嘗試通過使用map
遍歷數組來訪問嵌套對象產品中的值時,發生了一些奇怪的事情
this.state.operationSavInformation.map(
(operationSavInformation, i) => {
const operationSavLink = `/home/operationSav/${operationSavInformation.id}`;
console.log("operationSavInformation ", i);
console.log("operationSavInformation.produit"); // Works
console.log(operationSavInformation.produit);
/** LOGS THIS:
*
* id: 1
* nom_produit: "PURE BLACK MAT"
* type_produit: "Pure"
* couleur_produit: "black_mat"
* nbr_op_sav_en_cours: 7
* img: "img"
* createdAt: "2020-03-30T08:41:39.597Z"
* updatedAt: "2020-03-30T15:37:09.294Z"
*/
console.log(
operationSavInformation.produit["nom_produit"]
); //ERROR
/**TypeError: Cannot read property 'nom_produit' of undefined */
當我嘗試訪問 produit 的屬性“nom_produit”的值時,出現此錯誤:
類型錯誤:無法讀取未定義的屬性“nom_produit”
盡管如此,我已經成功地記錄了嵌套對象產品!!
console.log("operationSavInformation.produit"); // Works
console.log(operationSavInformation.produit);
/** LOGS THIS:
*
* id: 1
* nom_produit: "PURE BLACK MAT"
* type_produit: "Pure"
* couleur_produit: "black_mat"
* nbr_op_sav_en_cours: 7
* img: "img"
* createdAt: "2020-03-30T08:41:39.597Z"
* updatedAt: "2020-03-30T15:37:09.294Z"
*/
我真的找不到對這個奇怪結果的解釋。 如果 produit 對象已成功記錄,為什么在我嘗試訪問其屬性之一時將其視為未定義?
這絕對是荒謬的。 我添加了一個if else
,突然之間它起作用了:
this.state.operationSavInformation.map(
(operationSavInformation, i) => {
const operationSavLink = `/home/operationSav/${operationSavInformation.id}`;
console.log("operationSavInformation ", i);
console.log("operationSavInformation.produit"); // Works
console.log(operationSavInformation.produit);
const produit = operationSavInformation.produit;
console.log(
"produit = operationSavInformation.produit;"
);
console.log(produit);
if (produit !== undefined) {
// This gets executed despite the error without if else says that produit is undefined!!
console.log("produit is not undefined");
console.log(produit.nom_produit);
} else {
// This doesn't get executed despite the error without the if else is that it cannot read nom_produit of undefined
console.log("produit is undefined");
}}
但是,如果我刪除該條件,我仍然會得到produit is undefined 錯誤,但條件檢查它不是未定義的並且它有效!
通過您顯示的日志:
** LOGS THIS:
*
* id: 1
* nom_produit: "PURE BLACK MAT" // " nom_produit" should be right
* type_produit: "Pure"
我猜,你錯過了這個屬性的空間,試試
console.log(operationSavInformation.produit[" nom_produit"])
const test = { "id": 2, "nom_operation": "opSavCreationTest2", "num_serie": "1203250cd81b2101", "address_mac": "04:15:d9:00:00:49", "description": "opSavCreationTest2", "adminId": 82, "produitId": 1, "clientId": 2, "status": "produit_recu", "lieu_achat_produit": "opSavCreationTest2", "garanti_au": "07-02-2021", "createdAt": "2020-03-27T15:15:55.207Z", "updatedAt": "2020-03-27T15:15:55.207Z", "produit": { "id": 1, " nom_produit": "PURE BLACK MAT", //You should check this attribute, is it " nom_produit" or "nom_produit" "type_produit": "Pure", "couleur_produit": "black_mat", "nbr_op_sav_en_cours": 7, "img": "img", "createdAt": "2020-03-30T08:41:39.597Z", "updatedAt": "2020-03-30T15:37:09.294Z" }, "client": { "id": 2, "nomClient": "opSavCreationTest2", "numTel": "5775757575", "email": "opSavCreationTest2", "addresse": "opSavCreationTest2", "ville": "opSavCreationTest2", "pays": "opSavCreationTest2", "createdAt": "2020-03-27T15:15:55.043Z", "updatedAt": "2020-03-27T15:15:55.043Z" }, "admin": { "id": 82, "nom": "administrateur", "email": "aeaffeef@gmail.com", "mot_de_passe": "efefr3lnr8Fr4IwEsc=", "last_login": null, "role": "administrateur", "createdAt": "2020-03-23T09:08:43.585Z", "updatedAt": "2020-03-23T09:08:43.585Z" } } console.log(test.produit[" nom_produit"]) console.log(test.produit["nom_produit"])
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.