我正在使用 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 })
}

10-08 13:30