为 React 项目尝试 TypeScript 时遇到了这个错误。
TS7053:元素隐式具有“any”类型,因为“string”类型的表达式不能用于索引类型“{ paymentMethod: string; 数量:字符串;收据代码:字符串;付款日期:字符串;付款来源ID:字符串;}'。在类型“{ paymentMethod: string;”上找不到带有“string”类型参数的索引签名。数量:字符串;收据代码:字符串;付款日期:字符串;付款来源ID:字符串;}'
当我尝试 setInputs()
setInputs(inputs => ({...inputs, [inputs.field[eventName]]: eventValue}));
这是我的组件。
import React, {useState} from 'react';
import {DatePicker} from "jalali-react-datepicker";
import axios from "axios";
import PaymentFormClasses from './PaymentForm.module.css';
import PaymentCard from "../../Cards/PaymentCard/PaymentCard";
import Card from "../../Cards/Card";
interface PaymentForm {
field: {
paymentMethod: string,
amount: string,
receiptCode: string,
paymentDate: string,
paymentSourceID: string
}
}
const PaymentForm = () => {
const [inputs, setInputs] = useState<PaymentForm>({
field: {
paymentMethod: '',
amount: '',
receiptCode: '',
paymentDate: '',
paymentSourceID: 'paymentSourceID'
}
});
const changedHandler = (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLSelectElement>) => {
console.log(typeof e.target.name);
const eventName = e.target.name;
const eventValue = e.target.value;
setInputs(inputs => ({...inputs, [inputs.field[eventName]]: eventValue}));
console.log(e.target.value);
}
return (
<>
</>
);
};
export default PaymentForm;
您需要断言e.target.name
,这始终string
是正确的,实际上是 的有效键inputs.field
。
const eventName = e.target.name as keyof PaymentForm['field'];
但是您的更新语法不正确。您设置的输入顶级属性和您正在使用的值的inputs.field[eventName]
作为属性名。
您可以进行嵌套更新:
setInputs(inputs => ({
...inputs,
field: {
...inputs.field,
[eventName]: eventValue
}
}));
但是为什么我们需要拥有这个field
属性呢?这是唯一的财产,inputs
所以我们为什么不让它成为整个州。
interface Fields {
paymentMethod: string;
amount: string;
receiptCode: string;
paymentDate: string;
paymentSourceID: string;
}
const PaymentForm = () => {
const [fields, setFields] = useState<Fields>({
paymentMethod: "",
amount: "",
receiptCode: "",
paymentDate: "",
paymentSourceID: "paymentSourceID"
});
const changedHandler = (
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
) => {
setFields((fields) => ({
...fields,
[e.target.name as keyof Fields]: e.target.value
}));
};
return <></>;
};
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句