Authentication React-typescript:TypeError:无法读取属性'；id'；未定义的

我正在使用React typescript进行我的测试。我有一个登录页面，其中有两个输入字段。一个是电子邮件和密码。我创建了一个状态，在该状态中有

电子邮件
密码
和
加载
。默认输入字段工作正常，我的目标输入字段具有
id
。我已经决定，我将创建全局输入字段和自定义道具。当我使用全局输入字段时，它不会以
id
为目标，并抛出以下错误：
React-typescript:TypeError:无法读取未定义的
的属性“id”。我很确定在我的typescript
onChange
中会抛出这个错误。但我不知道如何修复它。这是我的密码

这是我的登录表单

import React, { ReactElement, useState } from "react";

import { TextInput } from "./input";

interface Props extends PageProps {}

export default function SignIn({}: Props): ReactElement {
  const [state, setState] = useState({
    email: ``,
    password: ``,
    loading: false
  });
  const { loading, email, password } = state;
  const handleSignIn = (e: React.ChangeEvent<HTMLInputElement>) => {
    setState({
      ...state,
      [e.target.id]: e.target.value //This is id which throws me error
    });
  };
  const onSubmit = async (e) => {
    e.preventDefault();
    console.log(state);
    setState({
      loading: true,
      ...state
    });
    const response = await fetch(
      "https://run.mocky.io/v3/beec46b8-8536-4cb1-9304-48e96d341461",
      {
        method: `POST`,
        headers: {
          Accept: `application/json`,
          "Content-Type": `application/json`
        },
        body: { state }
      }
    );
    console.log(response);

    if (response.ok) {
      setState({ ...state, loading: false });
      alert(`login succs`);
    } else {
      alert(`login failed`);
    }
  };
  return (
    <div>
      <TextInput
        type="text"
        value={email}
        onChange={handleSignIn}
        id="email"
        required
      />
      <TextInput
        type="password"
        value={password}
        onChange={handleSignIn}
        id="password"
        required
      />
      <button type="submit" name="action" onClick={onSubmit} disabled={loading}>
        {" "}
        {loading ? `loading...` : `save`}
      </button>
    </div>
  );
}

import React，{ReactElement，useState}来自“React”；
从“/input”导入{TextInput}；
接口道具扩展了PageProps{}
导出默认函数SignIn（{}:Props）：ReactElement{
常量[状态，设置状态]=使用状态({
电子邮件：``，
密码：``，
加载：错误
});
const{loading，email，password}=state；
常量handleSignIn=（e:React.ChangeEvent）=>{
设定状态({
……国家，
[e.target.id]：e.target.value//这是抛出错误的id
});
};
const onSubmit=async（e）=>{
e、 预防默认值（）；
console.log（状态）；
设定状态({
加载：对，
…州
});
const response=等待获取(
"https://run.mocky.io/v3/beec46b8-8536-4cb1-9304-48e96d341461",
{
方法：`POST`，
标题：{
接受：`application/json`，
“内容类型”：`application/json`
},
正文：{state}
}
);
控制台日志（响应）；
if（response.ok）{
setState（{…状态，加载：false}）；
警报（`login succs`）；
}否则{
警报（`login failed`）；
}
};
返回(
{" "}
{正在加载？`loading…`:`save`}
);
}

这是我的全局输入

import React, { ReactElement } from "react";
import styled from "styled-components";

interface Props {
  value: string;
  onChange: (e: string) => void;
  error?: string;
  id?: string;
}

const Input = styled.input``;

// eslint-disable-next-line func-style
export function TextInput({ value, onChange, error, id }: Props): ReactElement {
  return (
    <div>
      <Input
        value={value}
        onChange={(e) => onChange(e.target.value)}
        error={error}
        id={id}
      />
    </div>
  );
}

import React，{ReactElement}来自“React”；
从“样式化组件”导入样式化；
界面道具{
值：字符串；
onChange：（e:string）=>void；
错误？：字符串；
id？：字符串；
}
const Input=styled.Input`；
//eslint禁用下一行func样式
导出函数TextInput（{value，onChange，error，id}:Props）：ReactElement{
返回(
onChange（e.target.value）}
错误={error}
id={id}
/>
);
}
我找到了解决方案：我创建了两个句柄更改功能，一个用于电子邮件，一个用于密码

`const handleEmail = (email: string) => {
    setState({
      ...state,
      email
    });
  };
  const handlePassword = (password: string) => {
    setState({
      ...state,
      password
    });
  };`

我找到了解决方案：我创建了两个句柄更改功能，一个用于电子邮件，另一个用于密码const handleEmail=（email:string）=>{setState（{…state，email}）；}；const handlePassword=（密码：string）=>{setState（{…state，password}）；}；