类型空不可分配给'IntrinsicAttributes & Dispatch<SetStateAction<>>'

Question

这是我第一次接触typescript，我被困在以下错误:

错误:类型'{setTasks: void;}'不能赋值给类型'IntrinsicAttributes &Dispatch<SetStateAction&lt>

我的应用程序:

function App() {
const [tasks,setTasks] = useState<IStudy[] | []>([]);
return (
<div className={style.AppStyle}>
<Form setTasks={setTasks(tasks)}/>
<List tasks={tasks}/>
<Timer />
</div>
);
}

我的形式:

const Form = (setTasks : React.Dispatch<React.SetStateAction<IStudy[]>>)=> {
const [study,setStudy] = useState('')
function addTask(event: React.FormEvent){
event.preventDefault();
setTasks((oldstudies) => {[...oldstudies, {oldstudies}]});
}
return(
<form className={style.newTask} onSubmit={addTask}>
<div className={style.inputContainer}>
<label htmlFor="task">
Add your new study task
</label>
<input 
type="text"
name="task"
id="task"
value ={study}
onChange = {e => setStudy(e.target.value)}
placeholder="What do you want to study?"
required
/>
</div>
.................... )}

接口:

export interface IStudy {
study:string,
}

虽然我可以理解发生了什么(在typescript中分配的类型上不存在set task void类型)，但我无法理解如何为此错误创建适当的解决方案。如何在接口或参数中正确地分配此类型?

Answer 1

这里缺少解构(props总是作为对象传递):

const Form = ({ setTasks }: { setTasks: React.Dispatch<React.SetStateAction<IStudy[]>> })=> {

你不需要在泛型:

const [tasks, setTasks] = useState<IStudy[]>([]);

当你试图将setTasks传递给Form时，不应该调用CC_2:

<Form setTasks={setTasks} />