javascript - 处理对象数组更新响应的多种方式

Question

我有一个用户列表，更新后我这样处理

handleUserUpdated = (user) => {
  let users = this.state.users.slice();
  for (let i = 0, n = users.length; i < n; i++) {
    if (users[i]._id === user._id) {
      users[i].title = user.title;
      users[i].artist = user.artist;
      users[i].published_date = user.published_date;
      break; // Stop this loop, we found it!
    }
  }
  this.setState({ users: users });
}

我发现这种方法有缺陷，我必须始终声明属性并使用 break 让我觉得上面的代码很难看。有更好的方法吗？

不确定这是否正确。

this.setState({ users: users.map(o => o.id === user.id ? Object.assign({}, user, {...user}) : o ) })

Answer 1

也许更简洁的方法是:

users.map(o => o.id === user.id
  ? {...o, ...user}
  : o
)

最大的问题是您无法完全控制要放入其中的内容...原始文件可能具有您不再需要的属性，但不会被覆盖。

你可能会考虑做这样的事情:

const index = users.findIndex(o => o.id == user.id)
const newUsers = Object.assign([], users, {[index]: user});

Working example

或者

const index = users.findIndex(o => o.id == user.id)
const newUsers = [
  ...users.slice(0, index),
  user,
  ...users.slice(index + 1)
]