React Class 組件屬性中的 TypeScript 錯誤在類型“Readonly<{}>”上不存在，不確定如何為 state 設置類型

Question

我有一個 React Class 組件，在 state 中有兩個屬性。 我目前在嘗試動態 setState 時遇到 TypeScript 錯誤，該錯誤顯示Property 'input' does not exist on type 'Readonly<{}>' 。

我是 TypeScript 的新手，之前我還沒有解決將類型定義添加到 Class 組件的問題。 我一直在使用功能組件和鈎子，所以這個問題還沒有出現在我身上。

我為我的應用程序 State 定義了類型，然后將其傳遞給組件，但我仍然收到原始錯誤以及我定義 state 的新錯誤，它說'AppState' only refers to a type, but is being used as a value here.

我一直在尋找解決方案，但無法解決這個問題。

My original component

type AppState = {
  input: string;
  imageUrl: string;
}

class App extends Component<AppState> {
  constructor(props: any) {
    super(props);
    // Error: 'AppState' only refers to a type, but is being used as a value here.
    this.state: AppState = {
      input: "",
      imageUrl: "",
    };
  }

  onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({ input: e.target.value });
  };

  onButtonSubmit = () => {
    // Error: Property 'input' does not exist on type 'Readonly<{}>'.
    this.setState({ imageUrl: this.state.input });
    clarifaiApp.models
      .predict(
        Clarifai.COLOR_MODEL,
        // URL
        "https://samples.clarifai.com/metro-north.jpg"
      )
      .then(
        function (response: any) {
          console.log("This is your response: ", response);
        },
        function (err: Error) {
          console.log("There was an error: ", err);
        }
      );
  };

  render() {
    return (
      <Container>
        <ImageLinkForm
          onInputChange={this.onInputChange}
          onButtonSubmit={this.onButtonSubmit}
        />
        {/* Error: Property 'imageUrl' does not exist on type 'Readonly<{}>'. */}
        <FaceRecognition imageUrl={this.state.imageUrl} />
      </Container>
    );
  }
}

export default App;

Answer 1

如果要在 class 組件的constructor中初始化 state，則必須為React.Component泛型提供兩種類型的參數。 第一個參數旨在提供有關道具的類型信息，第二個參數旨在提供有關state的類型信息。 例如，

interface AppProps {
  // props 
}

type AppState = {
  input: string;
  imageUrl: string;
}

class App extends Component<AppProps,AppState> {
  // you don't need any more explicit type annotation here
  constructor(props) {
    super(props);
    this.state = {
      input: "",
      imageUrl: "",
    };
  }

  // rest of the app logic
}

如果您在構造函數外部的 state 字段中初始化了 state，這不會導致任何問題。

type AppState = {
  input: string;
  imageUrl: string;
}

class App extends Component {
  state: AppState = {
    input: "",
    imageUrl: ""
  }


  // rest of the app logic
}

在第二種情況下，如果組件需要一些道具，您可以選擇為道具提供類型參數。 例如，

interface AppProps {
  // type info for props
}

type AppState = {
  input: string;
  imageUrl: string;
}

class App extends Component<AppProps> {
   state: AppState = {
      input: "",
      imageUrl: ""
   }

   // rest of the app logic
}

Answer 2

對於 React class 組件，您通常需要分別為props和state的類型提供通用 prop 參數。

class App extends Component<AppProps, AppState> {

  ...

}

對於您的情況，由於App組件沒有道具，您只需要這樣做：

class App extends Component<{}, AppState> {
  constructor(props: {}) {
    super(props);
    this.state: AppState = {
      input: "",
      imageUrl: "",
    };
  }    
  ...

}

Answer 3

如果你想用鈎子試試，那么你可以這樣做。

import React, { useState } from "react";

interface AppState {
  input: string;
  imageUrl: string;
}

const App: React.FC<AppState> = () => {
  const [input, setInput] = useState("");
  const [imageUrl, setImageUrl] = useState("");

  const handleOnButtonSubmit = () => {
    setImageUrl(input);
    clarifaiApp.models
      .predict(
        Clarifai.COLOR_MODEL,
        // URL
        "https://samples.clarifai.com/metro-north.jpg"
      )
      .then(
        function(response: any) {
          console.log("This is your response: ", response);
        },
        function(err: Error) {
          console.log("There was an error: ", err);
        }
      );
  };

  return (
    <Container>
      <ImageLinkForm
        onInputChange={(e: any) => setInput(e.target.value)}
        onButtonSubmit={handleOnButtonSubmit}
      />
      <FaceRecognition imageUrl={imageUrl} />
    </Container>
  );
};

export default App;