React-typescript：TypeError：无法读取未定义的属性“id”答案

【问题标题】：React-typescript: TypeError: Cannot read property 'id' of undefinedReact-typescript：TypeError：无法读取未定义的属性“id”
【发布时间】：2020-09-21 08:35:26
【问题描述】：

我正在使用 React-typescript。我有一个登录页面，其中有两个输入字段。一个是电子邮件和密码。我创建了一个状态，并在该状态内部有emailpassword 和loading。默认输入字段可以正常工作，我的输入字段是id。我已经决定，我将创建全局输入字段和自定义道具。当我使用全局输入字段时，它不会以id 为目标，并向我抛出此错误：React-typescript: TypeError: Cannot read property 'id' of undefined。我很确定我的打字稿onChange 会抛出这个错误。但不知道如何解决它。这是我在Codesandbox 中的代码。

这是我的登录表单

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 } 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>
  );
}

【问题讨论】：

我找到了我的解决方案：我创建了两个句柄更改函数，一个用于电子邮件，一个用于密码.. ` const handleEmail = (email: string) => { setState({ ...state ，电子邮件 }）; }; const handlePassword = (password: string) => { setState({ ...state, password }); };

标签： authentication input onchange react-typescript

【解决方案1】：

我找到了解决方案：我创建了两个句柄更改函数，一个用于电子邮件，一个用于密码..

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

【讨论】：