Javascript 类型为“{[x:number]:any;}”的jhipster react form onChange状态参数不可赋值

Javascript 类型为“{[x:number]:any;}”的jhipster react form onChange状态参数不可赋值,javascript,reactjs,typescript,redux,jhipster,Javascript,Reactjs,Typescript,Redux,Jhipster,我是个新手,在使用两个字段设置表单中的状态时,jsx会遇到一些问题,这两个字段执行ajax调用以将json对象响应数据放入状态的字段3中。我有以下资料: export interface IMyClassState { field1: string; field2: string; field3: object; } export class MyClass extends React.Component<IMyClassProps, IMyClassState

我是个新手,在使用两个字段设置表单中的状态时,jsx会遇到一些问题,这两个字段执行ajax调用以将json对象响应数据放入状态的字段3中。我有以下资料:

export interface IMyClassState {
    field1: string;
    field2: string;

    field3: object;
}

export class MyClass extends React.Component<IMyClassProps, IMyClassState> {
    state: IMyClassState = {
        field1: '',
        field2: '',

        field3: null
    }

    ...

    onSubmit = e => {
        e.preventDefault();
        ...
    }

    onChange = e => {
        this.setState({ [e.target.name]: e.target.value });
    };

    ...

    render() {
        return(
            <form onSubmit={this.onSubmit}>
                <input type="text" id="field1" name="field1" onChange={this.onChange}/>
                <input type="text" id="field2" name="field2" onChange={this.onChange}/>
            </form>
        );
    }
};
但是如果我有100个字段,这将是一个问题,这就是为什么我试图直接从onChange中的e.target.name获取state字段的名称。但是,这给了我一个错误:

Argument of type '{ [x: number]: any; }' is not assignable to parameter of type 'IMyClassState | Pick<IMyClassState, "field1" | "field2" 

我如何消除这个错误?有没有可能像我尝试过的那样用一行程序优雅地解决问题?

第一部分是确定e的类型。我们可以使用类型查询告诉typescript类型与输入的onChange相同:onChange:JSX.IntrinsiceElements['input']['onChange']

第二部分是修复被推断为{[x:string]:string;}的对象文本。理想情况下,我们可以告诉编译器e.target.name是IMyClassState的键

上面的代码不起作用,因为typescript仍然会将对象文本的类型推断为{[x:string]:string;}。让编译器推断所需类型的唯一方法是将e.target.name强制转换为IMyClassState的特定字段

虽然对编译器撒谎并不理想,但这是最简单的选择。另一种选择是仅强制转换对象文字

onChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {
    this.setState({ [e.target.name]: e.target.value } as any as IMyClassState);
};
onChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {
    this.setState({ [e.target.name as keyof IMyClassState]: e.target.value });
};
onChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {
    this.setState({ [e.target.name as "field1"]: e.target.value }); // Ok now
};
onChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {
    this.setState({ [e.target.name]: e.target.value } as any as IMyClassState);
};