React Mobx 编辑可观察数组

【问题标题】：React Mobx edit observable arrayReact Mobx 编辑可观察数组
【发布时间】：2020-05-31 05:54:38
【问题描述】：

我正在学习 Mobx，我正在尝试构建一个表单应用程序，它显示数组的某些字段，您应该能够编辑它们。

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

我尝试制作函数：

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

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

【问题讨论】：

请发布所有相关代码。在哪里调用等等。

标签： reactjs observable mobx

【解决方案1】：

首先，您不必将数据存储在数组中如果您想将所有表单字段存储在一个可观察字段中，您应该使用例如对象或地图，如下所示：

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

【讨论】：