我正在使用 react-native-simple-store 并编写了以下函数来更新存储在对象数组中的提供对象的属性。为此,我使用了 issue #31 中提到的方法来删除项目。
问题是因为我使用 .push,更新一个项目会导致它在数组的底部呈现。这会导致项目在 FlatList 中不必要地移动。
是否有更有效的方法来更新数组中对象的属性(使用 .push 不会导致此问题)?
plusProgress = (itemId, progress) => {
const foods = this.state.foods.filter(({ id }) => itemId !== id);
const updatedItem = {
itemId,
progress: progress + 1
};
foods.push(updatedItem);
this.setState({ foods });
store.save('foods', foods);
}
最佳答案
使用正确位置的更新对象创建一个新数组,然后使用该新数组调用 setState()。如果当前项目不是您要更新的项目,请确保按原样返回当前项目。否则,数组元素将被 null 替换
plusProgress = (itemId, progress) => {
const foods = this.state.foods.map(item => {
if (item.itemId === itemId) {
return Object.assign({}, item, {progress: progress + 1});
}
return item
})
this.setState({ foods: foods })
}