Javascript fix元素如何隐式具有'；任何'；类型，因为表达式的类型为'；字符串'；can'；不能用于索引类型？

正在尝试React项目的TypeScript，我被这个错误卡住了

TS7053:元素隐式具有“any”类型，因为类型为“string”的表达式不能用于索引类型“{paymentMethod:string；amount:string；receiptCode:string；paymentDate:string；paymentSourceID:string；}”。在类型{paymentMethod:string；amount:string；receiptCode:string；paymentDate:string；paymentSourceID:string；}上未找到具有“string”类型参数的索引签名

当我尝试设置输入（）时

setInputs（inputs=>（{…inputs，[inputs.field[eventName]]：eventValue}）

这是我的组件

import React，{useState}来自“React”；
从“jalali react DatePicker”导入{DatePicker}；
从“axios”导入axios；
从“/PaymentForm.module.css”导入PaymentFormClasses；
从“../../Cards/PaymentCard/PaymentCard”导入PaymentCard；
从“../../Cards/Card”导入卡片；
接口付款表{
字段：{
paymentMethod:string，
金额：字符串，
receiptCode:string，
paymentDate:字符串，
paymentSourceID:字符串
}
}
const PaymentForm=（）=>{
常量[inputs，setInputs]=useState({
字段：{
付款方式：''，
金额：''，
接收代码：“”，
付款日期：''，
paymentSourceID:“paymentSourceID”
}
});
常量changedHandler=（e:React.ChangeEvent | React.ChangeEvent）=>{
console.log（类型e.target.name）；
const eventName=e.target.name；
const eventValue=e.target.value；
setInputs（inputs=>（{…inputs，[inputs.field[eventName]]：eventValue}）；
console.log（如target.value）；
}
返回(
);
};
导出默认支付表单您的eventName可以是字段键的并集。试试这个

type EventName = 'paymentMethod' | 'amount' | 'recieptCode' ...etc;
const eventName = e.target.name as EventName; // OR

const eventName = e.target.name as keyof PaymentForm['field'];


eventName可以是字段键的并集。试试这个

type EventName = 'paymentMethod' | 'amount' | 'recieptCode' ...etc;
const eventName = e.target.name as EventName; // OR

const eventName = e.target.name as keyof PaymentForm['field'];


您需要断言
e.target.name
，它总是
string
，实际上是
输入.field
的有效键

const eventName = e.target.name as keyof PaymentForm['field'];

但是，您的更新语法不正确。您正在设置输入的顶级属性，并使用
inputs.field[eventName]
的值作为属性名称

您可以执行嵌套更新：

setInputs(inputs => ({ 
  ...inputs, 
  field: { 
    ...inputs.field, 
    [eventName]: eventValue 
  }
}));

但是为什么我们需要这个
字段
属性呢？它是
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 <></>;
};

接口字段{
付款方式：字符串；
金额：字符串；
receiptCode：字符串；
paymentDate:字符串；
paymentSourceID:字符串；
}
const PaymentForm=（）=>{
const[fields，setFields]=useState({
付款方式：“，
金额：“，
接收代码：“，
付款日期：“，
paymentSourceID:“paymentSourceID”
});
常量changedHandler=(
e:React.change事件
) => {
设置字段（（字段）=>({
…字段，
[e.target.name作为keyof字段]：e.target.value
}));
};
返回；
};
您需要断言
e.target.name
，它总是
字符串
，实际上是
输入.field的有效键

const eventName = e.target.name as keyof PaymentForm['field'];

但是，您的更新语法不正确。您正在设置输入的顶级属性，并使用
inputs.field[eventName]
的值作为属性名称

您可以执行嵌套更新：

setInputs(inputs => ({ 
  ...inputs, 
  field: { 
    ...inputs.field, 
    [eventName]: eventValue 
  }
}));

但是为什么我们需要这个
字段
属性呢？它是
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 <></>;
};

接口字段{
付款方式：字符串；
金额：字符串；
receiptCode：字符串；
paymentDate:字符串；
paymentSourceID:字符串；
}
const PaymentForm=（）=>{
const[fields，setFields]=useState({
付款方式：“，
金额：“，
接收代码：“，
付款日期：“，
paymentSourceID:“paymentSourceID”
});
常量changedHandler=(
e:React.change事件
) => {
设置字段（（字段）=>({
…字段，
[e.target.name作为keyof字段]：e.target.value
}));
};
返回；
};
这是一个非常常见的问题。我相信这可以作为副本关闭。Do
const eventName=e.target.name作为PaymentForm['field']的键我真的对你的语法感到困惑，
{…inputs，[inputs.field[eventName]]：eventValue}
，我认为应该是类似于
{…inputs，inputs.field[eventName]：eventValue}
@pavankumar
inputs.field[eventName]：eventValue
的语法无效。它可能是
{field:{…inputs.field，[eventName]：eventValue}
这是一个非常常见的问题。我相信这可以作为副本关闭。Do
const eventName=e.target.name作为PaymentForm['field']的键我真的对你的语法感到困惑，
{…inputs，[inputs.field[eventName]]：eventValue}
，我认为应该是类似于
{…inputs，inputs.field[eventName]：eventValue}
@pavankumar
inputs.field[eventName]：eventValue
的语法无效。它可能应该是
{field:{…inputs.field，[eventName]：eventValue}