Javascript React-Typescript:类型为'的参数；{[x:number]：任意；}'；不可分配给类型为的参数

我在我的项目中添加了onChange方法（React、TS、Mobx），但是我得到了一个错误：“{[x:number]：any；}”类型的

参数不能分配给类型的参数

我不熟悉打字脚本，不知道为什么会这样。有什么问题吗

(parameter) event: {
    target: {
        name: any;
        value: any;
    };
}

类型为“{[x:number]：any；}”的参数不可分配给 类型为“IAddPlayerFormState |”（prevState: 只读，道具：只读） =>IAddPlayerFormState | Pick | null）| Pick | null

import React，{Component}来自'React'；
从“../../../store/ViewStore”导入ViewStore；
从“/../../../../utils”导入{TextField}；
接口IAddPlayerFormProps{
viewStore？：viewStore；//可选的viewStore
}
接口IAddPlayerFormState{
playerName：字符串；
isDisabled：布尔值；
}
类AddPlayPerform扩展了组件{
构造函数（道具：只读）{
超级（道具）；
此.state={
isDisabled:错误，
playerName:“，
};
}
public onChange（事件：{target:{name:any；value:any；}；}）{
this.setState（{[event.target.name]：event.target.value}）；
console.log（'On Change！'）；
}
公共把手提交=（）=>{
console.log（'On submit！'）；
}
公共渲染（）{
const{isDisabled}=this.state；
返回(
);
}
}
导出默认AddPlayPerform；

您的状态形状如下：

接口IAddPlayerFormState{
playerName：字符串；
isDisabled：布尔值；
}

您正在使用以下命令调用setState：

{any: any}

您只能更改值：playerName和isDisabled，不能更改任何值。如果将函数签名重写为

public onChange(event: { target: { name: "playerName"|"isDisabled"; value: any; }; })

或者更好

public onChange(event: { target: { name: keyof IAddPlayerFormState ; value: any; }; })

---

对于typescript应该可以。顺便说一句，这段代码将无法工作。更改输入名称：）。我希望这个答案很清楚，否则我会编辑它。

您需要告诉Typescript，您的对象将具有来自IAddPlayerFormState的一个或多个属性，但不一定是所有属性。您可以这样做：

public onChange(event: { target: { name: any; value: any; }; }) {
  const newState = { [name]: value } as Pick<IAddPlayerFormState, keyof IAddPlayerFormState>;
  this.setState(newState);
  console.log("On Change!");
}

public onChange（事件：{target:{name:any；value:any；}；}）{
const newState={[name]：value}作为Pick；
this.setState（newState）；
console.log（“On Change！”）；
}

使用此语法为我消除了错误：

const myFunction = (e) => {
    return this.setState({...this.state, [e.target.id]: e.target.value});
}

---

你所需要做的就是指定要更新/更改的项目

this.setState（{value:value}）；

type ItemState={
值？：字符串；//我要更新的状态
};

#你的情况是

this.setState（{playerName:new_value}）；

您是否使用任何UI库？如果是，请参见此处输入元素的类型。否则无需重新构造内联类型，只需

event:React.FormEvent

，它是一个合成事件，包含目标名称和目标值的所有类型。您可以解释“…this.state”@Jesse sure，…this.state将扩展/解构state对象，然后向/修改解构对象添加更多对象。最后，获取所有这些并使用this.setState将其分配到当前状态。

const myFunction = (e) => {
    return this.setState({...this.state, [e.target.id]: e.target.value});
}