问题描述
好,我是新来的反应者,而且遇到了一些操纵商店的问题。
当我在输入中键入内容时,键入的每个字符的值都会被覆盖。
组件:
@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}
/>
);
}
}