React Mobx редактировать наблюдаемый массив

Я изучаю Mobx и пытаюсь создать приложение-форму, которое отображает некоторые поля массива, и вы должны иметь возможность их редактировать.

У меня есть массив @observable myArray, как мне отредактировать определенное поле этого массива?

Я попробовал сделать функцию:

@action setMyArray(id, value) => {
   myArray.map(field => {
      if (field.id === id) {
          field.text = value
      }
   }
}

Когда я использую это как метод обратного вызова для текстового поля, он добавляет только 1 букву к текущему значению поля и не выполняет повторную визуализацию в текстовом поле.


reactjs observable mobx
person Walt    schedule 25.05.2020    source источник
comment
Пожалуйста, разместите весь соответствующий код. Где это называется и т. Д.   -  person Moshe Sommers    schedule 26.05.2020

Ответы (1)


arrow_upward
0
arrow_downward

Прежде всего, вам не нужно хранить данные в массиве. Если вы хотите сохранить все поля формы в одном наблюдаемом поле, вы должны использовать, например, объект или карту, например:

class SomeStore {
  @observable formData = new Map();

  @action
  setValue = (name, value) => {
    this.formData.set(name, value)
  }
}

а затем вы можете использовать такой код для реагирующего компонента

const onChange = (event) => {
  SomeStore.setValue(event.target.name, event.target.value);
}

return (
  ...
    <input name="firstName" onChange={onChange} value={SomeStore.formData.get('firstName')} />
    <input name="lastName" onChange={onChange} value={SomeStore.formData.get('lastName')} />
  ...
)
person IT's Bruise    schedule 30.05.2020