J'ai un composant de classe de réagisme avec deux propriétés de l'état. J'obtiens actuellement une erreur dosseuse lorsque vous essayez de définir de manière dynamique celle indiquant Je suis plus récent pour TypoScript et i Je n'ai pas encore eu à s'attaquer au problème de l'ajout de définitions de type à une composante de classe avant. Je travaille principalement avec des composants fonctionnels et des crochets afin que ce problème ne soit pas venu pour moi. P> J'ai défini le type de mon état d'application, puis je l'ai passé dans le composant, mais je suis toujours Obtenir l'erreur d'origine ainsi qu'une nouvelle erreur lorsque je définit l'état indiquant que I ' Je cherchais une solution pour une solution mais je n'ai pas été capable de résoudre ceci. p> Property 'Entrée' n'existe pas sur le type 'Readonly ' code>. 'appstate' ne fait que désigner un type, mais est utilisé comme valeur ici. Code> P> mon composant d'origine code> p> 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;
3 Réponses :
Pour les composants de la classe REDOC, vous aurez généralement besoin de fournir les paramètres de propag générique avec les types pour les apps class App extends Component<{}, AppState> {
constructor(props: {}) {
super(props);
this.state: AppState = {
input: "",
imageUrl: "",
};
}
...
}
Ça l'a fait! Merci! Assez étrangement, je reçois toujours une erreur à ceci.state: appstate = {...} donc j'ai supprimé appstate pour le changer en ce . {...} et ça marche!
Si vous souhaitez initialiser l'état à l'intérieur du constructeur code> d'un composant de classe, vous devez fournir deux arguments de type sur le réacte.component code> générique. Le premier argument est destiné à fournir des informations de type sur les accessoires et le deuxième argument est destiné à fournir les informations de type sur l'état code>. Par exemple, 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
}
Si vous voulez l'essayer avec les crochets, vous pouvez le faire.
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;