新的反应框架

Question

我已经有几个月没有做过 react 应用了，但是当我开始一个新的并尝试导入我的旧功能时，我收到了这个错误：

C:/Users/Hello/Documents/Dev/contacts/client/src/App.tsx
TypeScript error in C:/Users/Hello/Documents/Dev/contacts/client/src/App.tsx(24,28):
Property 'logUsername' does not exist on type 'Readonly<{}>'.  TS2339

  handleLoginSubmit = (e: any) => {
    e.preventDefault();
    const user = {
      username: this.state.logUsername,
      password: this.state.logPassword
    };
    this.props.login(user);
  };

这是从全新安装的 create-react-app 和 npx create-react-app 客户端 --template typescript

这是我唯一更改的文件，App.tsx：

    import React, { Component } from "react";
import "./App.css";

export default class App extends Component {
  constructor(props: any) {
    super(props);
    this.state = {
      username: "",
      password: "",
      logUsername: "",
      logPassword: ""
    };
  }

  handleChange = (e: any) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  handleLoginSubmit = (e: any) => {
    e.preventDefault();
    const user = {
      username: this.state.logUsername,
      password: this.state.logPassword
    };
    this.props.login(user);
  };
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <p>enter email to unsub from this mailing list:</p>
          <form onSubmit={this.handleLoginSubmit}>
            <input
              className="inputs"
              onChange={this.handleLoginChange}
              type="text"
              name="email"
              value={this.state.logUsername}
              placeholder="email"
            />
            <button className="homeButtons" id="logInBttn">
               Submit
            </button>
          </form>
        </header>
      </div>
    );
  }
}

Answer 1

这与打字稿有关。您必须明确说明您的属性和状态。

type AppProps = {}

type AppState = {
  logUsername: string,
  logPassword: string,
  username: string,
  password: string
}

class App extends React.Component<AppProps, AppState> {
    ...
}