Reactjs TypeScript抱怨我的setState语句使用属性访问器

在下面的代码示例中，我尝试为多个输入使用一个onInputChange处理程序，TypeScript在语句

{[name]：value}

中给出以下错误：

[ts]
Argument of type '{ [x: number]: string | boolean; }' is not assignable to parameter of type 'SoftwareLicenseCodesState | ((prevState: Readonly<SoftwareLicenseCodesState>, props: Readonly<SoftwareLicenseCodesProps>) => SoftwareLicenseCodesState | Pick<SoftwareLicenseCodesState, "count" | ... 4 more ... | "distributor"> | null) | Pick<...> | null'.
  Type '{ [x: number]: string | boolean; }' is not assignable to type 'Pick<SoftwareLicenseCodesState, "count" | "oneTimeUsage" | "duration" | "validFrom" | "validTo" | "distributor">'.
    Property 'count' is missing in type '{ [x: number]: string | boolean; }'.

[ts]
类型为“{[x:number]：string | boolean；}”的参数不能分配给类型为“SoftwareLicenseCodesState |的参数（（prevState:Readonly，props:Readonly）=>SoftwareLicenseCodesState | Pick | null）| Pick | null”。
类型“{[x:number]：string | boolean；}”不可分配给类型“Pick”。
类型“{[x:number]：string | boolean；}”中缺少属性“count”。

这里怎么了？我怎样才能修好它

import * as React from 'react';
import './SoftwareLicenseCodes.css';

interface SoftwareLicenseCodesProps {
}

interface SoftwareLicenseCodesState {
    count: string;
    oneTimeUsage: boolean;
    duration: string;
    validFrom: string;
    validTo: string;
    distributor: string;
}

class SoftwareLicenseCodes extends React.Component<SoftwareLicenseCodesProps, SoftwareLicenseCodesState> {
    constructor(props: SoftwareLicenseCodesProps) {
        super(props);

        this.state = {
            distributor: '',
            count:'',
            oneTimeUsage: false,
            duration: '',
            validFrom: '',
            validTo: ''
        };

        this.onInputChange = this.onInputChange.bind(this);
    }

    handleSubmit(event: React.FormEvent<HTMLFormElement>) {
        alert('submit');
        event.preventDefault();
    }

    onInputChange = (event: React.FormEvent<HTMLInputElement>) => {
        const value = event.currentTarget.type === 'checkbox' ? event.currentTarget.checked : event.currentTarget.value;

        this.setState({
            [name]: value
        });
    }

    render() {
        return (
            <div className="user-container software-codes">
                <div className="user-single-container">
                    <h1>Software License Codes</h1>

                    <form className="software-codes__form" onSubmit={this.handleSubmit}>
                        <label>
                            <span className="software-codes__input-element">Count</span>
                            <input
                                name="count"
                                type="number"
                                value={this.state.count}
                            />
                        </label>

                        <label>
                            <span className="software-codes__input-element">Distributor</span>
                            <input
                                name="distributor"
                                type="text"
                                value={this.state.distributor}
                            />
                        </label>

                        <label>
                            <span className="software-codes__input-element">One time usage</span>
                            <input
                                name="oneTimeUsage"
                                type="checkbox"
                                checked={this.state.oneTimeUsage}
                            />
                        </label>

                        <label>
                            <span className="software-codes__input-element">Duration</span>
                            <input
                                name="duration"
                                type="number"
                                value={this.state.duration}
                            />
                        </label>
                        <input className="software-codes__input-element" type="submit" value="Submit" />
                    </form>
                </div>
            </div>
        );
    }
}

export default SoftwareLicenseCodes;

import*as React from'React'；
导入“./SoftwareLicenseCodes.css”；
接口软件LicenseCodesProps{
}
接口软件许可证代码状态{
计数：字符串；
一次性用法：布尔；
持续时间：字符串；
validFrom：字符串；
validTo:字符串；
分配器：字符串；
}
类SoftwareLicenseCodes扩展React.Component{
构造函数（道具：SoftwareLicenseCodesProps）{
超级（道具）；
此.state={
分销商：“”，
计数：“”，
用法：false，
持续时间：“”，
有效日期：''，
有效地址：''
};
this.onInputChange=this.onInputChange.bind（this）；
}
handleSubmit（事件：React.FormEvent）{
警报（“提交”）；
event.preventDefault（）；
}
onInputChange=（事件：React.FormEvent）=>{
const value=event.currentTarget.type=='checkbox'？event.currentTarget.checked:event.currentTarget.value；
这是我的国家({
[名称]：值
});
}
render（）{
返回(
软件许可证代码
计数
经销商
一次性使用
期间
);
}
}
导出默认软件许可证代码；

您没有显示错误所抱怨的接口（

LicenseCodesState

，

Pick

），但我假设它们的定义与您引用的

SoftwareLicenseCodesState

类似

允许动态属性赋值，如

this.setState（{[name]：value}），您需要执行以下两项操作之一：

将动态属性访问添加到定义（但保持读取）：

或者在您要传递的状态对象上：

this.setState({[event.currentTarget.name]: value} as Partial<SoftwareLicenseCodesState>);

this.setState（{[event.currentTarget.name]：value}作为部分）；

这会丢失对该调用的类型检查，但会在其他地方保留它

您没有包含
this.setState（）
的代码，但看起来您正在向
this.setState（）
传递一个对象，该对象与它期望接收的对象类型不同。@FrankFajardo-它位于
onInputChange
回调中：
this.setState（{[name]：value}）
@T.J.Crowder:我已经编辑了这篇文章。@user1283776-我用更好的第二个选项更新了去年的答案。：-）（旁注：据我所知，
onInputChange
中未定义
name
。我想你的意思是
event.currentTarget.name
）很抱歉造成混淆。我又更新了我的帖子。太棒了，谢谢你的解决方案！如果你不介意我问的话，我在哪里学这些东西？我已经阅读了TypeScript手册（上），但仍然发现自己经常结结巴巴。@user1283776-我也是。：-）出于某种原因，我只是没有继续阅读TypeScript手册/文档。这是我不久前从一个不同的问题中学到的。很抱歉没有更好的答案给你。无论如何，谢谢你！：-）如果你有时间和精力，考虑一下我在这里的后续问题：（-）实际上，这里似乎是同一个问题。@ Remi-可悲的是，当处理某些类型的代码时（如这个代码动态地将属性的名称作为字符串），必须做出妥协。但上面还有一个更好的折衷方案，我补充道：：-）
const name = event.currentTarget.name as keyof SoftwareLicenseCodesState;
this.setState({[name]: value});

this.setState({[event.currentTarget.name]: value} as Partial<SoftwareLicenseCodesState>);