如何修复元素隐式具有“任何”类型,因为“字符串”类型的表达式不能用于索引类型?

波尔达克

为 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

元素隐式具有“任意”类型,因为类型“字符串”的表达式不能用于索引类型A

元素隐式具有“任何”类型,因为“字符串”类型的表达式不能用于索引“类型”类型

元素隐式具有“任意”类型,因为类型“字符串”的表达式不能用于索引

TypeScript:元素隐式具有“任何”类型,因为“字符串”类型的表达式不能用于索引类型

反应打字稿错误 - 元素隐式具有任何类型,因为类型字符串的表达式不能用于索引类型 {}

Angular - 元素隐式具有“任何”类型,因为“字符串”类型的表达式不能用于索引类型

TS7053:元素隐式具有“任何”类型,因为“字符串”类型的表达式不能用于索引“User_Economy”类型

错误 TS7053:元素隐式具有“任何”类型,因为“字符串”类型的表达式不能用于索引“模块类型”

元素隐式具有 'any' 类型,因为类型 'string' 的表达式不能用于索引类型 {"1" : { "key": string}; "2" : { "key": 字符串};}

模板文字键具有“任何”类型,因为“字符串”类型的表达式不能用于索引类型

元素隐式具有“any”类型,因为“string”类型的表达式不能用于索引“Breakpoints”类型

元素隐式地具有“ any”类型,因为类型“ any”的表达式不能用于索引类型

元素隐式地具有“ any”类型,因为类型“ string”的表达式不能用于索引类型

元素隐式具有“any”类型,因为“string”类型的表达式不能用于索引“Palette”类型

元素隐式具有 'any' 类型,因为类型 'string' 的表达式不能用于索引类型 '{ AT: number; 是:数字,...}`

Typescript错误:元素隐式具有“ any”类型,因为类型“ string”的表达式不能用于索引类型

TypeScript - 元素隐式具有“any”类型,因为“storyFile”类型的表达式不能用于索引类型“{}”

元素隐式具有“any”类型,因为“string”类型的表达式不能用于索引“PointDto”类型

该元素隐式具有类型“any”,因为类型“string”的表达式不能用于索引该类型

元素隐式具有“任何”类型,因为“字符串”类型的表达式

打字稿“元素隐式具有'任何'类型,因为'Rank'类型的表达式不能用于索引类型'IPowerCards'”

TS7053:元素隐式具有“任何”类型,因为“页面”类型的表达式不能用于索引类型“对象”

元素隐式具有“任何”类型,因为“数字”类型的表达式不能用于索引类型“{}”。.ts(7053) VUEJS

元素隐式具有 any 类型,因为时间表达式 any 不能用于索引类型

TypeScript:隐式具有“ any”类型,因为类型“ string”的表达式不能用于索引类型

元素隐式具有“any”类型,因为“Tag”类型的表达式不能用于索引类型“{}”。类型“{}”上不存在属性“html”

TypeScript-元素隐式地具有“ any”类型,因为类型“ string”的表达式不能用于索引类型

元素隐式具有 'any' 类型,因为类型 'string' 的表达式不能用于索引类型 '{property: string, property: string }'

map()中的Typescript错误:元素隐式具有“ any”类型,因为类型“ string”的表达式不能用于索引类型