Javascript 我需要帮助加快React Native中的数组筛选/列表视图（对其他方法开放）
我有一个结构（我控制格式；每个节点都有“名称”：“”和“选中”：true） 我希望在react native中构建一个嵌套的checkbox控件 我很成功，有点。。。通过破坏这个JSON（几次迭代的尝试，我还没有清理这个代码） 通过：更改原始数据Javascript 我需要帮助加快React Native中的数组筛选/列表视图（对其他方法开放）,javascript,arrays,react-native,sorting,Javascript,Arrays,React Native,Sorting,我有一个结构（我控制格式；每个节点都有“名称”：“”和“选中”：true） 我希望在react native中构建一个嵌套的checkbox控件 我很成功，有点。。。通过破坏这个JSON（几次迭代的尝试，我还没有清理这个代码） 通过：更改原始数据 let obj = {} for (const rs of rcftData.foodtree) { obj["r-" + rs.realmid] = { realmid: rs.realmid , c
let obj = {}
for (const rs of rcftData.foodtree) {
obj["r-" + rs.realmid]
= { realmid: rs.realmid
, checked: false
, skey: "r-" + rs.realmid
, name: rs.name
, padd: 0
}
for (const cs of rs.children) {
obj["r-" + rs.realmid + "-c-" + cs.classid]
= { realmid: rs.realmid
, classid: cs.classid
, checked: false
, skey: "r-" + rs.realmid + "-c-" + cs.classid
, name: cs.name
, padd: 15
}
for (const fs of cs.children) {
obj["r-" + rs.realmid + "-c-" + cs.classid + "-f-" + fs.familyid]
= { realmid: rs.realmid
, classid: cs.classid
, familyid: fs.familyid
, checked: false
, skey: "r-" + rs.realmid + "-c-" + cs.classid + "-f-" + fs.familyid
, name: fs.name
, padd: 30
}
for (const ts of fs.children) {
obj["r-" + rs.realmid + "-c-" + cs.classid + "-f-" + fs.familyid + "-t-" + ts.typeid]
= { realmid: rs.realmid
, classid: cs.classid
, familyid: fs.familyid
, typeid: ts.typeid
, checked: false
, skey: "r-" + rs.realmid + "-c-" + cs.classid + "-f-" + fs.familyid + "-t-" + ts.typeid
, name: ts.name
, padd: 45
}
}
}
}
}
setFilteredChecks(_.values(obj))
const wowWtf = [
{
"checked": true,
"padd": 0,
"realmid": "1",
"skey": "r-1",
},
{
"checked": true,
"classid": "1",
"padd": 15,
"realmid": "1",
"skey": "r-1-c-1",
},
{
"checked": true,
"classid": "1",
"familyid": "1",
"padd": 30,
"realmid": "1",
"skey": "r-1-c-1-f-1",
},
{
"checked": true,
"classid": "1",
"familyid": "1",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-1-t-1",
"typeid": "1",
},
{
"checked": true,
"classid": "1",
"familyid": "1",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-1-t-2",
"typeid": "2",
},
{
"checked": true,
"classid": "1",
"familyid": "1",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-1-t-3",
"typeid": "3",
},
{
"checked": true,
"classid": "1",
"familyid": "1",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-1-t-4",
"typeid": "4",
},
{
"checked": true,
"classid": "1",
"familyid": "1",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-1-t-5",
"typeid": "5",
},
{
"checked": true,
"classid": "1",
"familyid": "1",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-1-t-6",
"typeid": "6",
},
{
"checked": true,
"classid": "1",
"familyid": "2",
"name": "White",
"padd": 30,
"realmid": "1",
"skey": "r-1-c-1-f-2",
},
{
"checked": true,
"classid": "1",
"familyid": "2",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-2-t-7",
"typeid": "7",
},
{
"checked": true,
"classid": "1",
"familyid": "3",
"padd": 30,
"realmid": "1",
"skey": "r-1-c-1-f-3",
},
{
"checked": true,
"classid": "1",
"familyid": "3",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-3-t-8",
"typeid": "8",
},
{
"checked": true,
"classid": "1",
"familyid": "3",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-3-t-9",
"typeid": "9",
},
{
"checked": true,
"classid": "1",
"familyid": "3",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-3-t-10",
"typeid": "10",
},
{
"checked": true,
"classid": "1",
"familyid": "3",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-3-t-11",
"typeid": "11",
},
{
"checked": true,
"classid": "1",
"familyid": "3",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-3-t-12",
"typeid": "12",
},
{
"checked": true,
"classid": "1",
"familyid": "3",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-3-t-13",
"typeid": "13",
},
{
"checked": true,
"classid": "1",
"familyid": "3",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-3-t-14",
"typeid": "14",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 30,
"realmid": "1",
"skey": "r-1-c-1-f-4",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-15",
"typeid": "15",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-16",
"typeid": "16",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-17",
"typeid": "17",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-18",
"typeid": "18",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-19",
"typeid": "19",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-20",
"typeid": "20",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-21",
"typeid": "21",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-22",
"typeid": "22",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-23",
"typeid": "23",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-24",
"typeid": "24",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-25",
"typeid": "25",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-26",
"typeid": "26",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-27",
"typeid": "27",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-28",
"typeid": "28",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-29",
"typeid": "29",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-30",
"typeid": "30",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-31",
"typeid": "31",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-32",
"typeid": "32",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-33",
"typeid": "33",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-34",
"typeid": "34",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-35",
"typeid": "35",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-36",
"typeid": "36",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-37",
"typeid": "37",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-38",
"typeid": "38",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-39",
"typeid": "39",
},
{
"checked": true,
"classid": "1",
"familyid": "4",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-4-t-40",
"typeid": "40",
},
{
"checked": true,
"classid": "1",
"familyid": "5",
"padd": 30,
"realmid": "1",
"skey": "r-1-c-1-f-5",
},
{
"checked": true,
"classid": "1",
"familyid": "5",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-5-t-41",
"typeid": "41",
},
{
"checked": true,
"classid": "1",
"familyid": "6",
"padd": 30,
"realmid": "1",
"skey": "r-1-c-1-f-6",
},
{
"checked": true,
"classid": "1",
"familyid": "6",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-6-t-42",
"typeid": "42",
},
{
"checked": true,
"classid": "1",
"familyid": "6",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-6-t-43",
"typeid": "43",
},
{
"checked": true,
"classid": "1",
"familyid": "7",
"padd": 30,
"realmid": "1",
"skey": "r-1-c-1-f-7",
},
{
"checked": true,
"classid": "1",
"familyid": "7",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-7-t-44",
"typeid": "44",
},
{
"checked": true,
"classid": "1",
"familyid": "7",
"padd": 45,
"realmid": "1",
"skey": "r-1-c-1-f-7-t-45",
"typeid": "45",
}
]
import { CheckBox } from 'react-native-elements'
import _ from 'lodash'
const [filteredChecks, setFilteredChecks] = useState([wowWtf]);
const checkboxVisibilityToggle = (incomingKey) => {
let temp = filteredChecks
let obj = temp.find(x => x.skey === incomingKey);
let index = temp.indexOf(obj);
let newval = !temp[index].checked
for(i=0;i<temp.length;i++){
if(temp[i].skey.includes(incomingKey)){
temp[i].checked=newval
}
}
setFilteredChecks(temp)
}
const RenderFilterCategory = ({ item }) => {
return (
<View style={[{ paddingLeft: item.padd}]} >
<CheckBox
checked={item.checked}
title={item.name}
key={item.skey}
checkedColor={xtextlink}
onPress={() => { checkboxVisibilityToggle(item.skey) }}
keyExtractor={item.skey}
/>
</View>
)
}
// section from the main screen.
<ScrollView style={[{height:400}]}>
<View>
<FlatList
vertical
data={wowWtf}
renderItem={RenderFilterCategory}
keyExtractor={item => `${item.skey}`}
numColumns={1}
/>
</View>
</ScrollView>
import { CheckBox } from 'react-native-elements'
import _ from 'lodash'
const [filteredChecks, setFilteredChecks] = useState([wowWtf]);
const checkboxVisibilityToggle = (incomingKey) => {
let temp = filteredChecks
let obj = temp.find(x => x.skey === incomingKey);
let index = temp.indexOf(obj);
let newval = !temp[index].checked
for(i=0;i<temp.length;i++){
if(temp[i].skey.includes(incomingKey)){
temp[i].checked=newval
}
}
setFilteredChecks(temp)
}
const RenderFilterCategory = ({ item }) => {
return (
<View style={[{ paddingLeft: item.padd}]} >
<CheckBox
checked={item.checked}
title={item.name}
key={item.skey}
checkedColor={xtextlink}
onPress={() => { checkboxVisibilityToggle(item.skey) }}
keyExtractor={item.skey}
/>
</View>
)
}
// section from the main screen.
<ScrollView style={[{height:400}]}>
<View>
<FlatList
vertical
data={wowWtf}
renderItem={RenderFilterCategory}
keyExtractor={item => `${item.skey}`}
numColumns={1}
/>
</View>
</ScrollView>
let thisid = temp[index][keysearch]
setFilteredChecks(
filteredChecks.map(item =>
item[keysearch] === thisid
? {...item, checked : newval}
: item
))