無法使用 Typescript 在組件上傳遞狀態道具

Question

這是我在這里的第一個問題，所以如果我犯了一些錯誤，我很抱歉。 在學校待了一段時間后，我嘗試自己學習 Typescript，以學習如何使用 React。 所以我是這里的女嬰開發者！

所以這是我的問題：我必須在組件上傳遞一個狀態女巫是一個對象。 我有點困惑，因為我使用 React Hook 而我不習慣 POO。

所以這是我的 App.tsx

 const App: React.FC = () => { // States Interfaces interface Iinput { input: string; } interface ITask { title: string; done: boolean; } // States // State permettant de stocker texte input const [input, setInput] = useState(""); // State permettant de stocker les tâches const [task, setTask] = React.useState([{ title: "", done: false }]); // Fonction de submit const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); if (!input) { alert("Veuillez entrer une nouvelle tâche"); } else { let newTask: Array<ITask> = [...task]; let taskObj = {} as ITask; taskObj.title = input; taskObj.done = false; newTask.push(taskObj); setTask(newTask); } }; console.log("toto"); return ( <> <div> <Header /> </div> <div className="main-container"> <div className="task-container"> <h2>TO DO</h2> <div> <Task task={task} setTask={setTask}/>; </div> // And there is my Task component import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; export interface ITask { task:object; setTask:React.Dispatch<React.SetStateAction<object>> } interface Props { task:ITask; setTask:ITask // handleSubmit?: ((e: React.FormEvent<HTMLFormElement>) => void); } const Task: React.FC<Props> = () => { return ( <ul className="task-section"> <div className="task-title">toto</div> <button className="trash-button"> <FontAwesomeIcon icon={"trash"} size="2x" color={"#2D7B8D"} className="trash" /> </button> </ul> ); }; export default Task;

不幸的是，我可以找到如何將我的狀態任務傳遞到我的任務組件中。 這是我來自 Typescript 日志的錯誤消息

非常感謝您的幫助！

Answer 1

主要問題是您的Task組件文件中有一個ITask接口，它與主App組件中存在的ITask接口不同。

• 刪除第二個定義（ interface Props上面的那個）。
• 將ITask的原始定義ITask App組件主體之外，並將其從文件中導出。
• 將該定義導入到Task文件中。

此外，您在單個任務和任務數組之間有些混淆。 Task組件似乎呈現單個任務，但您將狀態值傳遞給它，該值是一個數組。 您可能打算像這樣循環遍歷它們

{task.map( (single, i) => (
  <Task task={single} setTask={(task) => { /* do something */ }}/>
))}

在Task組件的Props中，您已經說過setTask是一個ITask ，但它可能意味着是一個函數。 而不是像setTask這樣含糊不清的東西，您可能希望傳遞給它特定的函數，例如deleteTask 、 markComplete等。