使用React Hooks删除/更新嵌套对象

Question

我对react原生编程语言还比较陌生。我一直在尝试制作我的第一个独立应用程序，当然是待办事项列表应用程序。我必须在各自的类别下做项目。这些待办事项的来源是一个预定义的对象，如下所示。

const [listData, setListData] = useState([
{
id: 1,
title: "Work",
data: [
{
text: 'MSD',
key: 1
},
{
text: 'Cosmo',
key: 2
},
{
text: 'Jackson',
key: 3
},
]
},
{
id: 2,
title: "Home",
data: [
{
text: 'Gym',
key: 4
},
{
text: 'Dinner',
key: 5
},
{
text: 'React',
key: 6
},
]
},
]);

这些数据是在主函数App((中定义的。使用以下代码，数据在屏幕上完美呈现。主屏幕图像

return(
<View style={styles.container}>
<Header />
<SectionList
sections={listData}
keyExtractor={(item, index) => item + index}
renderSectionHeader={({ 
section: { title } }) => (
<Text style={styles.header}>{title}</Text>
)}
renderItem={({ item }) => <Item data={item.text} dataID={item.key} onDeleteHandler={onDeleteHandler}/>}
/>
</View>
)

项目组件代码为-

const Item = ({ data, dataID, onDeleteHandler }) => {
const [checked, setChecked] = React.useState(false);
return(
<View style={styles.itemGroup}>
<TouchableOpacity style={styles.item} onPress={() => {
if (checked == true){ 
setChecked(false)
}
else{
setChecked(true)
}
}}>
<View>
<Text style={checked === true ? styles.toDoTextStrikeThrough : styles.toDoText}>{data}</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => onDeleteHandler(dataID)}>
<View style={styles.checkBoxAndDeleteStyle}>
<Entypo name="cross" color='#004d4d' size={18}/>
</View>
</TouchableOpacity>
</View>
)
};
export default Item;

我被卡住的地方是delete按钮，它调用下面的函数。

const onDeleteHandler = (key) => {
const parentArray = [...listData]
for (let i = 0; i < parentArray.length; i++)
{
let paDataItems = {...parentArray[i]}.data
const dataArray = [...paDataItems]
for (let k = 0; k < dataArray.length; k++){
if (dataArray[k].key === key){
dataArray.splice(k,1)
break
}
}
console.log(dataArray)
}
}

dataArray显示所有正确的对象。我不知道如何将其更新回主数据集。我尝试了以下两种方法，但都会导致奇怪的行为。

setListData((paDataItems) => [...paDataItems,{data:dataArray}])
setListData([{...parentArray[i]}, {data:dataArray}])

我应该如何编写此函数以便删除所选项目？我想，一旦我有了上述问题的解决方案，我应该能够弄清楚如何更新数据集。

如有任何帮助，我们将不胜感激。非常感谢。

Answer 1

您可以映射组/类别并过滤数据数组：

const onDeleteHandler = key => {
const newData = listData.map(category => ({
...category,
data: category.data.filter(item => item.key !== key)
})
);
setListData(newData);
};

使用功能状态更新可能更正确，因为在单个渲染周期内多个状态更新排队的情况下，下一个状态取决于任务项被正确删除的前一个状态：

const onDeleteHandler = key => {
setListData(listData => listData.map(category => ({
...category,
data: category.data.filter(item => item.key !== key)
})
));
};

let data = [{
id: 1,
title: "Work",
data: [{
text: 'MSD',
key: 1
},
{
text: 'Cosmo',
key: 2
},
{
text: 'Jackson',
key: 3
},
]
},
{
id: 2,
title: "Home",
data: [{
text: 'Gym',
key: 4
},
{
text: 'Dinner',
key: 5
},
{
text: 'React',
key: 6
},
]
},
];
const onDeleteHandler = key => {
const newData = data.map(category => ({
...category,
data: category.data.filter(item => item.key !== key)
})
);
return newData;
};
console.log(onDeleteHandler(3))

Answer 2

您可以简化onDeleteHandler函数，如下所示：

const newData = listData.map(group => {
return { 
...group,
data: group.data.filter(task => task.key !== key)
}
})
setListData(newData);