Как обновить объект в состоянии React

У меня есть индексированный список users в объекте JS (а не в массиве). Это часть состояния React.

{
    1: { id: 1, name: "John" }
    2: { id: 2, name: "Jim" }
    3: { id: 3, name: "James" }
}

Какая наилучшая практика:

  • добавить нового пользователя {id: 4, name: "Jane" } с id (4) в качестве ключа
  • удалить пользователя с идентификатором 2
  • измените имя пользователя № 2 на "Питер"

Без каких-либо непреложных помощников. Я использую Coffeescript и Underscore (так что _.extend в порядке...).

Спасибо.

Ответы

Ответ 1

Это то, что я сделал бы

  • добавить: var newUsers = _.extend({}, users, { 4: { id: 4, ... } })
  • удалить: var newUsers = _.extend({}, users) затем delete newUsers['2']
  • change: var newUsers = _.extend({}, users) затем newUsers['2'].name = 'Peter'

Ответ 2

Если вы не используете Flux, вы используете this.setState() для обновления объекта состояния.

delUser(id) {
    const users = this.state.users;
    delete users[id];
    this.setState(users);
}

addChangeUser(id, name) {
    const users = this.state.users;
    users[id] = {id: id, name: name};
    this.setState(users);
}

Затем вы можете выполнить свои тестовые примеры следующим образом:

addChangeUser(4, 'Jane);
addChangeUser(2, 'Peter');
delUser(2);

Ответ 3

Помимо _.extend, вы можете использовать Map для хранения user

let user = new Map();
user.set(4, { id: 4, name: "Jane" }); //adds with id (4) as key
user.myMap.set(2, { id: 2, name: "Peter" }); // set user #2 to "Peter"
user.delete(3); //deletes user with id 3

Ответ 4

setState также принимает функцию, которую вы можете найти более интуитивно понятным

function add( user ) {
  this.setState( users => {
    users[ user.id ] = user
    return users
  }
}

function remove( id ) {
  this.setState( users => {
    delete users[ id ]
    return users
}

Эти функции предполагают, что ваш объект state ваш users объект, если он фактически state.users, тогда вам нужно будет выбрать users, передав функцию setState всегда будет вызывать передачу фактического объекта state.

В этом примере add также может использоваться для изменения, в зависимости от вашего фактического использования, вы можете создать отдельные помощники.

Ответ 5

Использование спредов:

Добавление

this.setState({
  ...this.state,
  4: { id: 4, name: "Jane" },
}

Удаление id 2

let prevState = this.state;
let {"2": id, ...nextState} = prevState;
this.setState({
  ...nextState,
}

Изменение ID 2

this.setState({
  ...this.state,
  2: {
    ...this.state["2"],
    name: "Peter",
  }
}