更新存储数组中对象的属性 - React Native

Question

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

Answer 1

你可以尝试不可变的添加到数组

foods.concat(updatedItem);

更多关于变异和非变异数组方法的信息在这里 https://lorenstewart.me/2017/01/22/javascript-array-methods-mutating-vs-non-mutating/

Answer 2

与其从列表中删除对象，不如将其替换为更新版本：

plusProgress = (itemId, progress) => {
    const foods = this.state.foods.map(food => {
        if (itemId === food.id) {
            return Object.assign({}, food, {progress: progress + 1});
        }

        return item;
    });

    this.setState({foods});
}

为了更准确，您可能应该从plusProgress() 中删除progress 参数并改用item.progress。这可确保您增加当前进度值，而不是依赖于将不相关的值传递给函数。

Answer 3

使用正确位置的更新对象创建一个新数组，然后使用该新数组调用 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 })
}