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

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

Answer 3

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

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});
}

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

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

3 个答案: