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;

不幸的是，我可以找到如何将状态任务传递给Task组件。 Here is my error message from Typescript log

非常感谢您的帮助！

Answer 1

主要问题是，ITask组件文件中有一个接口Task，它与主ITask组件内部的接口App不同。

删除第二个定义（interface Props上方的那个）。
将ITask的原始定义移到App组件主体之外，然后从文件中导出。
将该定义导入Task文件中。

此外，您在单个任务和一系列任务之间也有一些困惑。 Task组件似乎呈现单个任务，但是您正在从状态（数组）中为其传递值。您可能打算像这样遍历它们

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

在Props组件的Task中，您已经说过setTask是ITask，但它可能是一个函数。您可能希望将诸如setTask，deleteTask等特定功能传递给它，而不是像markComplete这样模糊不清的东西。

无法使用Typescript在组件上传递State道具

1 个答案: