Remote Mobx编辑可观察数组

Question

我正在学习Mobx，我正在尝试构建一个显示数组中某些字段的表单应用程序，您应该可以对其进行编辑。

我有一个数组@observable myArray，如何编辑该数组的某个字段？

我尝试制作函数：

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

当我将其用作文本字段的回调方法时，它只会向该字段的当前值添加1个字母，而不会在文本字段中重新呈现。

Answer 1

首先，您不必将数据存储在数组中如果要将所有表单字段存储在一个可观察字段中，则应使用诸如object或Map之类的方法，例如：

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

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

然后您可以将此类代码用于react组件

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')} />
  ...
)