reactjs - TypeScript 提示我的 setState 语句使用了属性访问器

Question

在下面的代码示例中，我尝试为多个输入设置一个 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; }'.

这里有什么问题？我该如何解决？

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;

Answer 1

您没有显示错误所提示的接口(interface)(LicenseCodesState、Pick)，但我假设它们的定义类似于您引用的 SoftwareLicenseCodesState.

要像您的 this.setState({[name]: value}); 那样允许动态属性分配，您需要做以下两件事之一:

1. 为定义添加动态属性访问(但请继续阅读):

   interface SoftwareLicenseCodesState {
       count: string;
       oneTimeUsage: boolean;
       duration: string;
       validFrom: string;
       validTo: string;
       distributor: string;
       [key: string]: any;            // <===
   }
   

   手册将其称为“字符串索引签名”，它包含在 Interfaces 下.

   这样做的问题是，当然，这意味着您会丢失类型检查——不仅是在您使用它的地方，而且基本上在您使用 SoftwareLicenseCodesState 的任何地方。

2. 在执行 setState 调用时使用类型断言。你有几个选择。您可以在 name 上使用断言:

   const name = event.currentTarget.name as keyof SoftwareLicenseCodesState;
   this.setState({[name]: value});
   

   或在您传递的状态对象上:

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

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