這個想法是在用戶提供的特定索引處插入資料。我熟悉陣列插入方法，但不知道如何獲取用戶提供的資料索引以便能夠在該點插入資料。我的計劃是首先根據輸入過濾資料，然后使用該確切索引來使用 splice 方法。我確實過濾了資料，但還不止于此。任何幫助，將不勝感激。JSON 和代碼如下：
JSON
[
{
"district": "Kolkata",
"ward_no": [
{
"ward": "6",
"grievance": [
{
"serial_number": "0001",
"name" : "Mr.A"
},
{
"serial_number": "0002",
"name" : "Mr.B"
}
],
"general": [
{
"serial_number": "0003",
"name" : "Mr.C"
},
{
"serial_number": "0004",
"name" : "Mr.D"
}
]
},
{
"ward": "7",
"grievance": [
{
"serial_number": "0005",
"name" : "Mr.E"
},
{
"serial_number": "0006",
"name" : "Mr.F"
}
],
"general": [
{
"serial_number": "0007",
"name" : "Mr.G"
},
{
"serial_number": "0008",
"name" : "Mr.H"
}
]
}
]
},
{
"district": "Hooghly",
"ward_no": [
{
"ward": "8",
"grievance": [
{
"serial_number": "0009",
"name" : "Mr.I"
},
{
"serial_number": "0010",
"name" : "Mr.J"
}
],
"general": [
{
"serial_number": "0011",
"name" : "Mr.K"
},
{
"serial_number": "0012",
"name" : "Mr.L"
}
]
},
{
"ward": "9",
"grievance": [
{
"serial_number": "0013",
"name" : "Mr.M"
},
{
"serial_number": "0014",
"name" : "Mr.N"
}
],
"general": [
{
"serial_number": "0015",
"name" : "Mr.O"
},
{
"serial_number": "0018",
"name" : "Bruno Fernandes"
}
]
}
]
}
]
編碼：
const queryNew = {
district: "Kolkata",
ward: "6",
category: "grievance"
};
const data = {
serial_number: "0034",
name: "Donny Van De Beek"
};
const districtData = testData.filter(value => value.district === queryNew.district)[0];
const indexArray = districtData.ward_no.filter((value, index) => value.ward === queryNew.ward)[0][queryNew.category];
console.log(testData);
查詢引數是加爾各答、6 和我已過濾到兩個級別的申訴。我只需要知道如何data在上述查詢中插入。
PS 應用解決方案后，我多次出現 Donny Van De Beek。
import React from "react";
import testData from './testData.json';
const Display = () => {
const queryNew = {
district: "Kolkata",
ward: "6",
category: "grievance"
};
const data = {
serial_number: "0034",
name: "Donny Van De Beek"
};
const districtData = testData.find(value => value.district === queryNew.district);
if (districtData) {
const wardData = districtData.ward_no.find(value => value.ward === queryNew.ward);
if (wardData) {
wardData[queryNew.category].push(data);
}
}
console.log(districtData);
return(
<div></div>
);
}
export default Display;
uj5u.com熱心網友回復：
我認為filter()這不是必需的。過濾器是從陣列中洗掉一些專案并休息。只需使用find()并繼續從嵌套陣列中獲取正確的索引即可。find()將根據條件為您提供陣列中的匹配索引之一。如果沒有任何陣列元素匹配，undefined則回傳。
因為，物件是參考。您所做的任何更新都將反映在主陣列中。
let mainData = [
{
"district": "Kolkata",
"ward_no": [
{
"ward": "6",
"grievance": [
{
"serial_number": "0001",
"name" : "Mr.A"
},
{
"serial_number": "0002",
"name" : "Mr.B"
}
],
"general": [
{
"serial_number": "0003",
"name" : "Mr.C"
},
{
"serial_number": "0004",
"name" : "Mr.D"
}
]
},
{
"ward": "7",
"grievance": [
{
"serial_number": "0005",
"name" : "Mr.E"
},
{
"serial_number": "0006",
"name" : "Mr.F"
}
],
"general": [
{
"serial_number": "0007",
"name" : "Mr.G"
},
{
"serial_number": "0008",
"name" : "Mr.H"
}
]
}
]
},
{
"district": "Hooghly",
"ward_no": [
{
"ward": "8",
"grievance": [
{
"serial_number": "0009",
"name" : "Mr.I"
},
{
"serial_number": "0010",
"name" : "Mr.J"
}
],
"general": [
{
"serial_number": "0011",
"name" : "Mr.K"
},
{
"serial_number": "0012",
"name" : "Mr.L"
}
]
},
{
"ward": "9",
"grievance": [
{
"serial_number": "0013",
"name" : "Mr.M"
},
{
"serial_number": "0014",
"name" : "Mr.N"
}
],
"general": [
{
"serial_number": "0015",
"name" : "Mr.O"
},
{
"serial_number": "0018",
"name" : "Bruno Fernandes"
}
]
}
]
}
];
const queryNew = {
district: "Kolkata",
ward: "6",
category: "grievance"
};
const data = {
serial_number: "0034",
name: "Donny Van De Beek"
};
let districtData = mainData.find(x => x.district === queryNew.district);
if(districtData){
let ward = districtData.ward_no.find( x => x.ward === queryNew.ward);
if(ward)
ward[queryNew.category].push(data);
}
console.log(districtData);if 條件用于檢查。如果您確信自己的資料存在，則可以跳過它們。
uj5u.com熱心網友回復：
像這樣嘗試
const districtData = testData.find(
(item) => item.district === queryNew.district
);
const wardData = districtData.ward_no.find(
(item) => item.ward === queryNew.ward
);
wardData[queryNew.category].push(data);
console.log(testData);
代碼 => https://codesandbox.io/s/javascript-forked-qelt9?file=/index.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/367822.html
標籤：javascript 反应
上一篇：如何僅針對下一個js中的某些特定父組件觸發子組件功能？
下一篇：ReactMUIMultipleSelectwithCheckboxesnotCheckMarkInitialSelectedOptions