javascript - 如何修复 Element 隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引类型？

Question

为 React 项目尝试 TypeScript，但我遇到了这个错误。

TS7053：元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引类型“{ 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;

标签： javascriptreactjstypescriptreact-hooksreact-typescript

Answer 1

您需要断言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 <></>;
};