反应输入组件被存储在onChange上

如何解决反应输入组件被存储在onChange上

好，我是新来的反应者，而且遇到了一些操纵商店的问题。

当我在输入中键入内容时，键入的每个字符的值都会被覆盖。

组件：

@withStore
@observer
class ConfigModel extends Component {
    configModel;

    constructor(props) {
        super(props);
        this.configModel = this.props.store.configModelStore;
    }

    render() {
        const fieldsObj = this.configModel.modelConfig;
        const fieldHelpers = this.configModel.helperModelStore.modelConfig;
        const callbackOnChange = this.configModel;

        const campos = merge(fieldHelpers,fieldsObj); // _.merge()

        return (
            <Form key={'configModelForm'}>
                <>
                    {Object.entries(campos).map((campo) => {
                        if (campo[1].advanced) {
                            return;
                        }
                        if (campo[1].type === 'input') {
                            return (
                                <InputRender
                                    key={campo[1].id}
                                    field={campo[1]}
                                    onChange={callbackOnChange.valueOnChange}
                                />
                            );
                        }
                    })}
                </>
            </Form>
        );
    }
}

我的商店定义了一些可观察的对象（为简单起见，省略了一些选项，例如在上面的组件中评估的type）：

  @observable modelConfig = [{
      id: 'postType',value: '',disabled: false,advanced: false,},{
      id: 'pluralName',advanced: true,...
  ]

并定义一些动作：

  @action valueOnChange = (e,{id,value}) => {
    this.modelConfig.filter((config,index) => {
      if (config.id === id) {
        this.modelConfig[index].value = value;
        console.log(this.modelConfig[index].value);
      }
    });

上面的console.log()打印：

我真的相信我在这里忘记了一些基本概念，所以有人可以发现我在做什么错吗？

---

*编辑：

我有另一个组件和另一个可以正常工作的商店：

@observable name = '';
  @action setName = (e) => {
    this.name = e.target.value;
    console.log(this.name);
  }

所以我的问题是：

为什么以this.name为目标的特定值的操作正常，而以this.modelConfig[index].value为目标的索引生成的值的操作为何无效？

解决方法

问题出在<InputRender>组件上，该组件也收到了@observable装饰器。刚刚删除，它就可以了。

// @observer <---- REMOVED THIS
class InputRender extends Component {
    render() {
        const item = this.props.field;
        return (
            <InputField
                id={item.id}
                label={
                    <InfoLabel
                        label={item.label}
                        action={item.action}
                        content={item.popupContent}
                    />
                }
                placeholder={item.placeholder}
                onChange={this.props.onChange}
                value={item.value}
                disabled={item.disabled}
                error={item.error}
                throwError={item.throwError}
            />
        );
    }
}