【发布时间】：2022-01-05 05:26:55
【问题描述】：
这个想法是在用户提供的特定索引处插入数据。我熟悉数组插入方法，但不知道如何获取用户提供的数据索引以便能够在该点插入数据。我的计划是首先根据输入过滤数据，然后使用该精确索引来使用拼接方法。我确实过滤了数据，但没有超出这个范围。任何帮助，将不胜感激。 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。
P.S 应用解决方案后，我多次出现 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;
【问题讨论】：
-
您想更新 Array 的某些特定对象。对吧？
-
使用 filter() 是错误的方法，因为它返回一个新数组。使用
find()返回匹配的区和病房的对象，然后将数据推送到该对象的申诉数组中 -
查看您的代码，看起来该对象超出了组件的范围。而且因为对象没有被深度复制，所以每次渲染组件时都会向同一个数组中添加内容。
-
stackoverflow.com/questions/28876300/… 。看这个。
var testData2 = JSON.parse(JSON.stringify(testData));在您的组件中创建一个 testData2。这将是一个深层副本 -
@TusharShahi 似乎可以解决问题，尽管我无法知道该对象如何或为什么超出了组件的范围。将不得不检查
标签： javascript reactjs